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

Question

我正在研究 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我创造了。

Answer 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