我使用 d3、datamaps 和 topojson 创建了一个 choropleth 州地图。我在根据按钮单击更改原始地图数据时遇到问题。首选方法是仅在更改函数内刷新原始地图的数据。相反，我让按钮执行函数消除包含地图的 div，然后重新创建 div，然后完全生成一个新地图（请参阅下面的代码）。这是可行的，但我认为有一种更简单、更复杂的方法来刷新数据。任何帮助，将不胜感激。
<!DOCTYPE HTML>
<html>
<head>
<script src='js/d3.min.js'></script>
<script src='http://d3js.org/topojson.v1.min.js'></script>
<script src='js/datamaps.all.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
#map{height:400px; width: 600px; border-style: solid; border-color:white;}
#floating-panel1 {
position: absolute;
top: 10px;
left: 1%;
z-index: 5;
/*background-color: #fff;*/
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 1px;
}
</style>
<script>
var costChange = {
'AR':{'fillKey':'heavy','Percentage':'236%'},
'IL':{'fillKey':'light','Percentage':'5%'},
'IN':{'fillKey':'medium','Percentage':'20%'},
'KS':{'fillKey':'heavy','Percentage':'76%'},
'KY':{'fillKey':'heavy','Percentage':'289%'},
'MS':{'fillKey':'heavy','Percentage':'110%'},
'NC':{'fillKey':'heavy','Percentage':'261%'},
'TN':{'fillKey':'heavy','Percentage':'57%'},
'VA':{'fillKey':'heavy','Percentage':'57%'},
'WA':{'fillKey':'medium','Percentage':'18%'},
'WI':{'fillKey':'medium','Percentage':'18%'}
};
var rateChange = {'AL':{'fillKey':'medium','Percentage':'10%'},
'AR':{'fillKey':'medium','Percentage':'16%'},
'AZ':{'fillKey':'light','Percentage':'7%'},
'CO':{'fillKey':'heavy','Percentage':'44%'},
'CT':{'fillKey':'heavy','Percentage':'132%'},
'DE':{'fillKey':'light','Percentage':'6%'},
'FL':{'fillKey':'heavy','Percentage':'62%'},
'GA':{'fillKey':'medium','Percentage':'17%'},
'ID':{'fillKey':'heavy','Percentage':'66%'},
'IN':{'fillKey':'light','Percentage':'4%'},
'KS':{'fillKey':'medium','Percentage':'11%'},
'KY':{'fillKey':'medium','Percentage':'24%'},
'LA':{'fillKey':'medium','Percentage':'25%'},
'MA':{'fillKey':'heavy','Percentage':'55%'},
'MD':{'fillKey':'heavy','Percentage':'28%'}};
//initialize map with cost data
var map;
$(document).ready(function(){
map = new Datamap({
scope: 'usa',
element: document.getElementById('map'),
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
return "<div class='hoverinfo'>" + geography.properties.name + ' %:' + data.Percentage + ' '
},
highlightBorderWidth: 3
},
fills: {
'light': '#ffad99',
'medium': '#ff704d',
'heavy': '#ff3300',
defaultFill: '#ffebe6'
},
data:costChange
});
map.labels();
});
//button click removes map and recreated with cost data
function cstchng(){
$("#map").remove();
$("#title").after("<div id='map'></div>");
map = new Datamap({
scope: 'usa',
element: document.getElementById('map'),
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
return "<div class='hoverinfo'>" + geography.properties.name + ' %:' + data.Percentage + ' '
},
highlightBorderWidth: 3
},
fills: {
'light': '#ffad99',
'medium': '#ff704d',
'heavy': '#ff3300',
defaultFill: '#ffebe6'
},
data:costChange
});
map.labels();
}
//button click removes map and recreated with rate data
function rtchng(){
$("#map").remove();
$("#title").after("<div id='map'></div>");
map = new Datamap({
scope: 'usa',
element: document.getElementById('map'),
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
return "<div class='hoverinfo'>" + geography.properties.name + ' %:' + data.Percentage + ' '
},
highlightBorderWidth: 3
},
fills: {
'light': '#ffad99',
'medium': '#ff704d',
'heavy': '#ff3300',
defaultFill: '#ffebe6'
},
data:rateChange
});
map.labels();
}
</script>
</head>
<body>
<div id="floating-panel1">
<button type="button" onclick = "cstchng()">Cost Change</button>
<button type="button" onclick = "rtchng()">Range Change</button>
</div>
<div id="title"></div>
<div id="map"></div>
</body>
</html>
