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

我正在使用d3制作一个堆叠条形图

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

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");

我想为每个矩形创建工具提示，比如说“Likes:2”，这涉及到将关于条键的信息绑定到矩形。我没有找到这样做的方法（除了更改数据）。你能看到一个优雅的解决方案吗

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

您看过了吗

它可能正是你需要的，而且它为你做了大部分的工作。例如，仅添加此文本块：

$('svg circle').tipsy({ 
  gravity: 'w', 
  html: true, 
  title: function() {
    var d = this.__data__;
var pDate = d.date;
    return 'Date: ' + pDate.getDate() + " " + monthNames[pDate.getMonth()] + " " + pDate.getFullYear() + '<br>Value: ' + d.value; 
  }
});

$（'svg circle'）.tipsy（{
重力：“w”，
是的，
标题：函数（）{
var d=该数据；
var pDate=d.日期；
返回“日期：”+pDate.getDate（）+“”+monthNames[pDate.getMonth（）]+“”+pDate.getFullYear（）+”
值：“+d.Value；
}
});

---

获取D3示例中所有适当数据的工具提示：.< /p>< P>不确定是否认为这是一个优雅的解决方案，但它避免更改数据。

它利用了几个关键的“特征”：

• 您可以自由获取对选择数组的引用，然后使用选择数组（但要使用此数组，您需要知道当前选择组-请参阅最后一点）
• 通过.parentNode属性，可以获得父节点的DOM元素
• 通过_data _属性，可以获得父节点的关联数据
• 数据访问函数函数（d，i）{……}可以以3参数形式提供：函数（d，i，j）{……}，其中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; 
  }

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

---

正如我在要点中提到的——我记得读过关于数据访问器函数的这个3参数形式，但我一辈子都记不起在哪里了——我很乐意看到记录这个“特性”的源材料。

谢谢。我确实看过Tipsy，但我认为问题仍然存在——如何将条形数据与特定的矩形节点关联。可能遗漏了什么。啊，对不起，我看到你描述中遗漏了什么

d.parent

确实存在，它可以让您从标签到父节点获取数据——如果不进行测试，我不确定。如果您能够更改数据，这是一个有效的过程。您希望数据代表您的视觉效果，因此客户端浏览器必须做尽可能少的工作。恐怕d.parent（和d.parent（））都不起作用。对于JQuery，我认为这是因为d代表数据而不是DOM节点。这是一个非常好的答案。真的很有帮助！曾加。我已经发布了这个问题的后续信息。如果您能看一下，那就太好了；前一行：看起来nautat是第一个到达的：-）nautat-谢谢你的文档指针