d3通过id值将对象的数组数据绑定到加载的svg

Question

我已经为我的特定难题找到了几个潜在的答案，但还没有找到完美的解决方案。这次交换最接近尾声，Josh展示了一种简单的方法，可以使用d3的.datum将现有svg的id临时绑定到它的数据。然后，他使用.data键函数根据简单数组中的匹配值更新数据。

我正在尝试做一些类似的事情，但使用了一组对象。但由于某些原因，我的键函数找不到我要查找的对象值。如果我像Josh那样使用数组，那没问题。我想我可能需要使用d3.values或d3.entries；但事实并非如此。

非常感谢您的帮助！

我的svg有一堆g元素，其中包含id属性的状态缩写（例如…组中填充了路径。

我的数据数组如下：

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

我尝试将数据绑定到我的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 ); });
  });

我觉得我忽略了一些非常简单的事情，但却想不出来。也许我只是需要更多的咖啡。如果你有时间指出我的错误，我将不胜感激。

谢谢，John

Answer 1

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

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

在此处完成演示。