javascript - 使用 data() 方法向 d3.js 图表中的嵌套元素添加键

Question

我正在构建一个在数据中具有一定级别嵌套的 d3.js 图表，并且在应用 data() 函数时我无法指定行的键。下面简单介绍一下相关位。

我的数据是这种形式:

[
    {
        name: 'United States',
        values: [ {year:1960, imports:12, exports:13}, etc... ]
    },
    {
        name: 'China',
        values: [ {year:1960, imports:10, exports:11}, etc... ]
    }
]

然后我创建了这样的基本图:

var svg = d3.select(this).selectAll('svg').data([data]);
var g = svg.enter().append('svg').append('g').attr('class', 'main');
g = svg.select('g.main')

一切似乎都很好。对于数据中的每个国家/地区，我画了两条线，因此我将它们组合在一起 ( as described in this answer )。

var lines_g = g.selectAll("g.lines")
                  .data(function(d) { return d; },
                        function(d) { console.log(d.name); return d.name; });
lines_g.enter().append("g").attr("class", "lines");

这似乎也能正常工作 - 控制台显示来自 data() 调用的关键部分的“中国”和“美国”。

但我正在努力为每个 lines_g 组中的行添加一个键。例如，这样做:

lines_g.selectAll('path.line.imports')
         .data(function(d) { return [d.values]; },
               function(d) { console.log(d); return d.name; })
         .enter().append('path')
           .attr('class', 'line imports');

控制台显示我期望从记录 d.values 而不仅仅是 d 的数组:

[ {year:1960, imports:12, exports:13}, etc... ]

为什么此时我无法访问 d，因此无法访问 d.name？而且，给组内的行赋予与其组相同的键是否正确？

Answer 1

您在这里处理嵌套选择。也就是说，您对每个国家/地区都有一个顶级选择，并且每个国家/地区都有一个仅包含值的子选择——这就是您在说时所做的事情

.data(function(d) { return [d.values]; })

在那之后，您只能直接访问 d.values 中的内容。您从中记录 d 的关键函数被赋予您之前指定的数组元素 -- [d.values]。

如果您需要访问父数据元素的名称，我建议将此信息也放入子元素中。也就是说，每个 {year: 1960, ...} 还有一个 name: 'China' 成员。您可以使用如下代码实现此目的:

data.forEach(function(d) {
  d.values.forEach(function(e) {
    e.name = d.name;
  });
});

虽然这会重复很多信息，但在您的情况下可能没有必要。由于每个国家/地区只有一个数据元素，因此您可以直接传入 [d] 而不是 [d.values]。这只需要对线生成器的调用方式进行微小的更改，并且还可以让您在关键函数中访问国家/地区的名称。

我修改了另一个问题中的 jsfiddle 来做到这一点 here .