d3.js：将数据从父节点传递到子节点

我正在使用 d3 制作堆积条形图。

数据是一个数组，每个栏都有一个对象（例如“喜欢”）。然后每个对象都包含一个值数组，这些值驱动每个条形的各个矩形：

data =  [{
          key = 'likes', values = [
            {key = 'blue-frog', value = 1}, 
            {key = 'goodbye', value = 2}
          ]
        }, {
          key = 'dislikes, values = [
            {key = 'blue-frog', value = 3},
            {key = 'goodbye', value = 4}
          ]
        }]

该图表工作正常，如下所示：

// Create canvas
bars = svg.append("g");

// Create individual bars, and append data
// 'likes' are bound to first bar, 'dislikes' to second
bar = bars.selectAll(".bar")
        .data(data)        
        .enter()
        .append("g");

// Create rectangles per bar, and append data
// 'blue-frog' is bound to first rectangle, etc.
rect = bar.selectAll("rect")
        .data(function(d) { return d.values;})
        .enter()
        .append("rect");

我想为每个矩形创建工具提示，其中显示“喜欢：2”之类的内容，这涉及将有关条形键的信息绑定到矩形。我还没有找到一种方法来做到这一点（除了更改数据）。你能看到一个优雅的解决方案吗？

另外，我不确定我是否以最好的方式描述了这个问题。如果您对更好的标题有任何建议，请告诉我。

不确定您是否认为这是一个优雅的解决方案，但它避免了更改您的数据。

它利用了一些关键的“功能”：

• 您可以自由地获取对选择数组的引用，然后使用选择数组（但要使用此数组，您需要知道当前的选择组 - 请参阅最后一点）
• 通过.parentNode属性，可以获取父节点的DOM元素
• 通过__data__属性，可以获取到父节点的关联数据
• 数据存取功能函数（d，i）{....}可以以 3 参数形式提供：函数（d，i，j）{....} where j是当前选择组。

因此，在您的示例中，您可以获得选择数组：

var selection = bar.selectAll("rect")
  .data(function(d) { return d.values;})
  .enter();

从选择数组中，您可以获取相关数据：

selection
  .append("li")
  .text(function(d,i,j) {
    return selection[j].parentNode.__data__.key; 
  }

在本例中，更容易查看完整的示例，而不是代码片段：

http://bl.ocks.org/4199266

正如我在要点中提到的那样 - 我记得读过有关数据访问器函数的这种 3 参数形式的内容，但我一辈子都不记得在哪里 - 我欢迎指出记录此“功能”的源材料。