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

Question

我正在使用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"); 

我想创建每矩形工具提示这说事像“喜欢：2”这涉及绑定关于矩形栏键的信息。我还没有找到一种方法来做到这一点（除了更改数据）。你能看到一个优雅的解决方案？

另外，我不确定我是否以最好的方式描述了这个问题。让我知道，如果你有一个更好的标题（礼貌）的建议;-)

Answer 1

不知道您是否认为这是一个优雅的解决方案，但它可以避免更改您的数据。

它汲​​取了一些关键的“功能”：

• 你是自由去&参考，然后使用选择阵列（但使用这个数组，你需要知道当前选择组 - 看到最后一点）
• 通过.parentNode属性，可以得到父节点
• 通过__DATA__属性的DOM元素，你可以得到父节点
• 数据访问功能的相关数据功能（d，i）的{....}可以在3参数的形式提供：函数（d，I，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参数形式的数据访问函数的内容，但是不能记住我的生活 - 我希望被指向记录这个特性的源代码材料”。

Answer 2

你看过Tipsy？

它可能正是你所需要的，它为你做了很大一部分工作。例如，只需添加文本块：

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

获取你的D3例如，所有适当的数据工具提示：Line Chart with Tipsy Tooltips。