json - D3 - 更新 Choropleth csv 以更改颜色映射
问题描述
嗨,我是 D3 的新手,无法通过触发加载新 csv 的功能的按钮更新我的地图。我查看了类似的帖子,其中提到我只需要更新用颜色填充地图的部分,并尝试对此进行调整,但单击我的按钮不会影响地图。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Setting path fills dynamically to generate a choropleth</title>
<h1>Relation between Managers and Tertiary Education </h1>
<div id="option1">
<input type="button"value="Education"onclick="viewEducation()" />
</div>
<div id="option2">
<input type="button"value="Managers"onclick="viewManagers()" />
</div>
<script type="text/javascript" src="d3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 1000;
var h = 600;
var path = d3.geoPath()
.projection(d3.geoMercator()
.center([151,-33.5])
.scale(17000)
.translate([w/2,h/2]));
//Define quantize scale to sort data values into buckets of color
var color = d3.scaleQuantize()
.range(["rgb(237,248,233)","rgb(200,235,198)", "rgb(186,228,179)","rgb(146,208,140)", "rgb(116,196,118)", "rgb(88,178,100)", "rgb(49,163,84)", "rgb(20,130,60)", "rgb(0,109,44)"])
.domain([6274, 39796]);
//Colors derived from ColorBrewer, by Cynthia Brewer, and included in
//https://github.com/d3/d3-scale-chromatic
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in agriculture data
d3.csv("ManagerPercentage.csv", function(d) { d.value = parseFloat(d.value); parseFloat(d.value1); return d; }, function(data) {
//Set input domain for color scale
color.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value; })
]);
//Load in GeoJSON data
d3.json("australia_adm2.json", function(json) {
//Merge the ag. data and GeoJSON
//Loop through once for each ag. data value
for (var i = 0; i < data.length; i++) {
//Grab state name
var dataState = data[i].state;
//Grab data value, and convert from string to float
var dataValue = parseFloat(data[i].value);
//Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.sa4_name11;
if (dataState == jsonState) {
//Copy the data value into the JSON
json.features[j].properties.value = dataValue;
//Stop looking through the JSON
break;
}
}
}
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
//Get data value
var value = d.properties.value;
if (value) {
//If value exists…
return color(value);
} else {
//If value is undefined…
return "#ccc";
}
});
});
});
function viewEducation () {
d3.select("option1")
d3.csv("EducationPercentage.csv", function(data) {
svg.selectAll("path")
.style("fill", function(d) {
var value = d.properties.value;
if (value) {
return color(value);
} else {
return "#ccc";
}
});
});
}
function viewManagers () {
d3.select("option2")
d3.csv("ManagerPercentage.csv", function(data) {
svg.selectAll("path")
.style("fill", function(d) {
var value = d.properties.value;
if (value) {
return color(value);
} else {
return "#ccc";
}
});
});
});
}
</script>
</body>
</html>
解决方案
推荐阅读
- spring-boot - 如何在 SpringBoot 中加载具有多个证书的 .keystore
- json - 反序列化小列表/数组的杰克逊性能缓慢
- typescript - 为什么 b 总是为空?
- javascript - 更改 d3.format 用于“g”类型的表示法
- java - JavaFX 不使用类中的线程
- arduino - 使用 Eclipse Photon CDT Core Builder 编译 avr c++ lib
- html - Bootstrap 4.0轮播不工作
- android - 具有不同布局的可扩展 recyclerview 适配器
- javascript - 在 precommit 中运行 ESLint 不会因警告而停止
- python - 从其他 m 行中减去 m 行数据帧