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);

以下是更新的plunker：http://plnkr.co/edit/sVrtBsfn2eGbCbhbNZ4j?p=preview

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

1 个答案: