javascript - d3 按 id 值将对象数组数据绑定(bind)到加载的 svg

Question

我已经研究了针对我的特定难题的几个可能的答案，但尚未找到完美的解决方案。 This exchange最接近目标，其中 Josh 展示了一种使用 d3 的 .datum 将现有 svg 的 id 临时绑定(bind)到其数据的简单方法。然后，他使用 .data key 函数根据简单数组数组中的匹配值来更新data。

我正在尝试做类似的事情，但是使用对象数组。但由于某种原因，我的关键函数找不到我正在寻找的对象值。如果我像乔什一样使用数组的数组，没问题。我想我可能需要使用 d3.values 或 d3.entries；但看起来并非如此。

非常感谢任何帮助!

我的 svg 有一堆 g 元素，其中包含 id 属性的状态缩写(例如......这些组充满了路径。

我的数据数组如下所示:

var data = [
{

  "st" : "MI",
  "state" : "Michigan",
  "someValue" : 0.067
},
{
  "st" : "CA",
  "state" : "California",
  "someValue" : 0.111
},
etc.}];

我尝试将数据绑定(bind)到我的 SVG g 元素，如下所示:

$("#map").load("mymap.svg", function() {
    var theMap = d3.selectAll("#map svg g")
      .datum(function(d) { return [d3.select(this).attr("id")]; })
      .data(data, function(d){ return d.st; });
    theMap.each(function(d) { console.log( this, d.state ); });
  });

我觉得我忽略了一些非常简单的事情，但无法弄清楚。也许我只是需要更多咖啡。如果您能抽出一点时间指出我的方法中的错误，我们将不胜感激。

谢谢，约翰

Answer 1

您的数据结构与您链接到的问题略有不同，因此您需要在初始数据绑定(bind)中返回不同的结构:

.datum(function(d) { return {st: d3.select(this).attr("id")}; })

完整演示 here .