Question

我使用d3.tip.v0.6.3.js将工具提示添加到d3.js图表。

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

category    count
Asia    17
Eastern Europe  16
Africa  15

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

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

在可行的图表中，我只需输入d.count，并将计数数据返回给小费。

但是在新图表中，我想要返回非＆＃34;类别＆＃34;当鼠标移动到条形图的矩形上方时。

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

您需要稍微破解数据绑定以包含＆＃34;值＆＃34;吧：

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。

使用正确的数据填充d3.tip

1 个答案: