2
Я создал карту состояний choropleth, используя d3, datamaps и topojson. У меня возникают проблемы с изменением данных исходной карты на основе нажатия кнопки. Предпочтительный способ - просто обновить исходные данные карты внутри функции изменения. Вместо этого у меня есть функции выполнения кнопки, исключающие div, содержащие карту, затем воссоздают div, а затем полностью генерируют новую карту (см. Мой код ниже). Это работает, но я думаю, что есть намного более простой и сложный способ обновления данных. Любая помощь будет оценена по достоинству.Обновление данных о состоянии карты D3 choropleth при нажатии кнопки
<!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>