Question

我想要实现的是一个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数据数组元素进行匹配。

Answer 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在尝试查找绑定数据时所寻找的属性。

使用D3使用JSON数据填充现有SVG元素

1 个答案: