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

Question

我正在使用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"之类的内容.这涉及将条形键的信息绑定到矩形.我还没有找到一种方法(除了更改数据).你能看到优雅的解决方案吗？

另外,我不确定我是以最好的方式描述了这个问题.如果您对更好的标题有任何(礼貌的)建议,请告诉我;-)

Answer 1

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

它借鉴了一些关键的"功能":

• 您可以自由地获取对&然后使用选择数组的引用(但要使用此数组,您需要知道当前选择组 - 请参阅最后一点)
• 通过.parentNode属性,您可以获取父节点的DOM元素
• 通过__data__属性,您可以获取父节点的关联数据
• 数据访问函数函数(d,i){....}可以以3参数形式提供:function(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; 
  }

在这种情况下,更容易看到完整的示例,而不是代码片段:

http://bl.ocks.org/4199266

正如我在要点上提到的那样 - 我记得读过这个数据访问器功能的这个3参数形式,但不能为我的生活记住在哪里 - 我欢迎指出记录这个'特征'的源材料.