用正确的数据填充 d3.tip

Question

我正在使用 d3.tip.v0.6.3.js 向 d3.js 图表添加工具提示。

它似乎在只有 2 列数据的图表上运行良好，例如：

category    count
Asia    17
Eastern Europe  16
Africa  15

但是当我对堆积条形图使用相同的代码时，我得到“未定义”。我知道我遗漏了一些明显的东西。图表的数据如下所示：

Category,Statistics,Psychology,Programming,Mental health,Aboriginal education
Other,1,3,1,4,2
Lifelong learner,20,39,36,44,48

在有效的图表中，我只需输入 d.count 并将计数数据返回到提示。

但是在新图表中，当鼠标移到条形图的矩形上时，我想返回不是“类别”的数据。

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) { return "<span>" + d.name + "</span>" + " " + /*varHere*/ } );

我在这里有一个版本：embedded view on Plunker

Answer 1

您需要稍微修改数据绑定以包含栏的“值”：

state.selectAll("rect")
  .data(function(d) { 
    return d.ages.map(function(d0){ //<-- add in the relevant value to ages array
      d0.value = d[d0.name];
      return d0;
    });
})
.enter().append("rect")
...

那么.html的调用就变成了：

.html(function(d) { return "<span>" + d.name + "</span>" + " " + d.value } );

更新 Plunker here.