我想要实现的是一个SVG,它有几个单独的多边形,可以根据一组JSON数据进行着色。我几乎就在那里,但是在按正确的顺序将数据对象与SVG元素匹配时遇到了问题。
我创建了一个SVG,它有几个多边形,例如
<polygon id="Zone2" fill="#DFECC5" stroke="#000000" stroke-miterlimit="10" points="828.815,660.425 841.261,594.05 842.82,594.422 849.014,564.644 837.769,562.306 841.108,546.883 851.945,549.118 866.75,474.55 837.799,468.253 837.254,470.748 833.572,470.097 833.982,467.844 817.591,463.942 818.746,458.473 875.479,470.067 838.604,655.601 837.24,662.395 " style="fill: rgb(244, 246, 252);"><title>Car Park South, 1230</title></polygon>
这是我正在解析的JSON文件:
{
"zoneData":[
{"zoneID":"Zone1","name":"Car Park South", "value":1230},
{"zoneID":"Zone2","name":"Outdoor North", "value":3453},
{"zoneID":"Zone3","name":"Outdoor West", "value":2342},
{"zoneID":"Zone4","name":"Outdoor South", "value":3453},
{"zoneID":"Zone5","name":"High St. East", "value":1023},
{"zoneID":"Zone6","name":"High St. West", "value":2322},
{"zoneID":"Zone7","name":"Car Park North", "value":4562},
{"zoneID":"Zone8","name":"Indoor North", "value":5644},
{"zoneID":"Zone9","name":"Indoor South", "value":2356}
]
}
我设法解析所有内容并创建一个合适的色阶,甚至使用该比例为每个多边形设置颜色,但它们的顺序错误。脚本在这里:
d3.json("zoneAnalysisData.json", function(error, data) {
var minDataValue = d3.min(data.zoneData, function(d) { return d.value; })
var maxDataValue = d3.max(data.zoneData, function(d) { return d.value; })
var color = d3.scale.linear()
.domain([minDataValue, maxDataValue])
.range(["#ffffff", "#0038c5"]);
d3.selectAll("[id*='Zone']")
.data(data.zoneData)
.style("fill", function(d){
return color(d.value);
})
.append("title")
.text(function(d) {
return d.name + "\n" + d.value;
});
});
我查看了selections和thinking with joins上的文档,但无法弄清楚如何将我选择的现有元素与JSON数据数组元素进行匹配。
答案 0 :(得分:1)
问题是您需要按特定顺序选择多边形,.selectAll()
不保证这些多边形。您也无法轻松地对它们进行重新排序,因为D3的.sort()
方法适用于数据,此时数据尚未与元素绑定。
解决这个问题的一种方法是&#34;附加&#34;手动将一些数据传递给允许匹配元素和数据的元素。那么你所需要的只是一个关键功能:
d3.selectAll("[id*='Zone']")
.each(function() { this.__data__ = { zoneID: this.id })
.data(data.zoneData, function(d) { return d.zoneID; })
...
这里的第二行模仿D3内部的作用,并创建D3在尝试查找绑定数据时所寻找的属性。