d3.js-noob-如何通过路径ID将数据绑定到外部svg的路径?
我正在尝试使用一个SVG文件和一个csv数据来制作一个叶绿素地图。我是D3新手,正在编写一个使用geoJSON的示例。(谢谢Scott Murray)。 该示例将数据绑定到形状,如下所示:d3.js-noob-如何通过路径ID将数据绑定到外部svg的路径?,svg,d3.js,Svg,D3.js,我正在尝试使用一个SVG文件和一个csv数据来制作一个叶绿素地图。我是D3新手,正在编写一个使用geoJSON的示例。(谢谢Scott Murray)。 该示例将数据绑定到形状,如下所示: d3.json("us-states.json", function(json) { //Merge the ag. data and GeoJSON //Loop through once for each ag. data
d3.json("us-states.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++) {
var dataState = data[i].state; //Grab state name
var dataValue = parseFloat(data[i].value); //Grab data value, and convert from string to float
//Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
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";
}
});
d3.json(“us states.json”),函数(json){
//合并ag.data和GeoJSON
//每个ag.数据值循环一次
对于(变量i=0;i
但是我在适应svg时遇到了麻烦。我不需要让它创建路径——它们已经存在了,但是从本质上讲,如何编写:“如果data.country==path id,将该行的数据绑定到路径”
非常感谢您的帮助!!看看。做一些类似于:
// Where each path has an id
var paths = d3.selectAll('.my-paths path'),
elm,
data = [] // your data here,
your_criteria_here;
data.forEach(function (x, i, a) {
your_criteria_here = x.criteria;
// No data is available for the elements in this case yet
// @see https://github.com/mbostock/d3/wiki/Selections#wiki-each
paths.each(function (d, i) {
// Wrap dom element in d3 selection
elm = d3.select(this);
if (elm.attr('id') == your_criteria_here) {
// Do something here ...
}
});
});
注意:本例使用了[].forEach,这是ecmascript 5的一个功能(@see)请看一看。做一些类似于:
// Where each path has an id
var paths = d3.selectAll('.my-paths path'),
elm,
data = [] // your data here,
your_criteria_here;
data.forEach(function (x, i, a) {
your_criteria_here = x.criteria;
// No data is available for the elements in this case yet
// @see https://github.com/mbostock/d3/wiki/Selections#wiki-each
paths.each(function (d, i) {
// Wrap dom element in d3 selection
elm = d3.select(this);
if (elm.attr('id') == your_criteria_here) {
// Do something here ...
}
});
});
注意:本例使用了[].forEach,这是ecmascript 5的一个功能(@see)