javascript - 如何绑定(bind)数据到对应的D3.js map 元素？

Question

我的介绍性问题是:

将数据绑定(bind)到 D3.js map 的最佳方式是什么？

我想到了三种可能性:

1。根据数据应用类，然后将样式应用到类。

.attr("class", function(d) { return quantize(rateById.get(d.id)); })

这个选项似乎是最受欢迎的(参见 choropleth block )，但它实际上并没有绑定(bind)数据。因此，它似乎有点不符合 D3 的意图。这也意味着不能简单地为工具提示引用绑定(bind)数据，例如。

2。将 topo.json 要素集合数据与其余数据合并。

我们可以将所有数据放在一个变量中(也许使用 forEach)。结果可能类似于:

var mergeData = [{
                    area: "NW",
                    mean: 45,
                    features: {...}
                }, {
                    area: "NE",
                    mean: 23,
                    features: {...}
                }, {
                    area: "SW",
                    mean: 87,
                    features: {...}
                }, {
                    area: "SE",
                    mean: 56,
                    features: {...}
                }];

然后我们可以将 mergeData 绑定(bind)到路径元素，通过将“d”属性指向 d.features 来生成 map ，并使用 d 设置样式。意思是。这允许每个路径元素包含我们将永远需要的所有必要数据。但是，将它们组合在一起似乎很麻烦。

3。将特征集合数据替换为所需数据。

一旦绘制了 map 形状，就不需要要素集合数据。可以更换。为什么不简单地将我们需要的数据绑定(bind)到这些路径(在生成 map 形状之后)，以便它始终可用于样式、工具提示等？我们只需要一个关键函数来将新数据与正确的 map 形状相匹配。更新选择将负责替换。

d3.selectAll(".area").data(data, function(d) {
                            return d.id;
                        })
                        .style("fill", function(d) {
                            return colorScale(d.mean);
                        });

这似乎运作良好，而且干净整洁。需要注意的是数据的结构和特征集合必须相同。在两组数据上评估相同的键函数。因此，如果我们的数据是嵌套的，我们将无法访问 d.values.id，因为在特征集合中没有相应的 values - 它只是 d.id。直觉上，我希望有一个类似于 filter 的关键函数，这样我们就可以在每个数据集中指定 id 的位置，如下所示:

return d.id === d.values.id;

没有办法做到这一点，是吗？

解决方法是将嵌套数据重构为第三个扁平数据变量，使其不再嵌套。这样 d.id 就可以用在 key 函数中了。但这又一次显得很麻烦。

---

哪种方法最好？或者还有别的吗？

我仍在学习 D3，所以请随时纠正我的任何假设或直接编辑我的问题。

Answer 1

我刚刚发现的选项 #3 的解决方案实际上非常简单。创建嵌套数据后，可以立即迭代，在第一层插入需要的数据。

data.map(function(d) { d.id = d.values.id; });

这样它就可以在完全相同的结构中被关键函数使用。 values 中的所有汇总仍可供以后使用。