将工具提示添加到组条形图 d3 v4

【问题标题】：adding tooltip to group bar chart d3 v4将工具提示添加到组条形图 d3 v4
【发布时间】：2018-05-12 15:41:35
【问题描述】：

我正在处理this 参考，并根据我的数据对其进行了更改。我需要根据每个栏的值为其添加一个工具提示。

谁能告诉我该怎么做？

我已经尝试过this 示例，但无法成功。

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())

//I don't know how to show each value on its bar

      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)

这是我创建的Plunker。

【问题讨论】：

标签： javascript d3.js visualization

【解决方案1】：

步骤如下：

首先，引用库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>

然后，创建工具提示：

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
        console.log(d)
        return "<strong>Name:</strong>" + d.key + "<br><strong>Value:</strong>" + d.value;
    });

最后，叫它：

svg.call(tip);

这是更新的插件：http://plnkr.co/edit/sVrtBsfn2eGbCbhbNZ4j?p=preview

【讨论】：