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

对于我的难题，我已经仔细研究了几个可能的答案，但还没有找到完美的解决方案。最接近于标记，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.}];

$("#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 ); });
  });

我尝试将数据绑定到SVG g元素，如下所示：

var data = [
{

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

$("#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

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

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

---

完成演示。

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

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

---

完整的演示。

老实说，我看不出有什么区别——你的数据与你所链接的问题的结构完全相同。我不确定我是否理解这个问题。你是说这不管用吗？请原谅我在回答中的停顿；我在试图结束这个项目的同时，一直在照顾我的孩子。Wh在dev控制台中，我看到id属性的绑定工作得很好。但是，使用d.st值作为键来替换它的数据绑定没有生效。因此，console.log（这个，d.state）为SVG g元素生成未定义的。如果我在没有键函数的情况下对.datum方法进行.data覆盖，它会覆盖数据；但显然是使用默认的索引。长话短说……问题肯定出在编写的键函数上。啊，好的，我想我现在就知道了。您需要

返回[{st:d3.select（this）.attr（“id”）}]；

对于初始数据绑定，否？是的，忽略

[]

围绕返回值，只返回对象：老实说，我看不出有什么区别——你的数据与你链接的问题的结构完全相同。我不确定我是否理解这个问题。你是说这不管用吗？请原谅我的回答中的停顿；我一直在照顾我的孩子，而我在正在尝试结束此项目。我在开发人员控制台中看到的是，id属性的绑定工作得很好。但是，使用d.st值作为键来替换它的数据绑定没有生效。因此，console.log（this，d.state）为SVG g元素生成未定义的。如果我在没有键函数的情况下对.datum方法进行.data覆盖，它会覆盖数据；但显然是使用默认的索引。长话短说……问题肯定出在编写的键函数上。啊，好的，我想我现在就知道了。您需要

返回[{st:d3.select（this）.attr（“id”）}]；

但是对于初始数据绑定，没有？是的，忽略返回值周围的

[]

，只返回对象：您从我这里获得了额外的100万次重复。非常感谢！您从我这里获得了额外的100万次重复。非常感谢！