Question

我想在信息窗口上添加一个简单的鼠标到条形图，让用户能够查看确切的数据。我该如何将其添加到此d3条形图中？

这是Plunker https://plnkr.co/edit/d0ReUGwk4l066yuMZYXw?p=preview

我以为我可以添加这样的东西，但我收到了错误

bars.attr("y", function(d) {
    return y(d.state);
})
    .attr("height", y.rangeBand())
    .attr("x", 0)
    .attr("width", function(d) {
        return x();
    })
    .attr("fill", function(d, i) {
        return color(i);
    })
    .attr("id", function(d, i) {
        return i;
    })
    .on("mouseover", function() {
        d3.select(this)
            .attr("fill", "red");
    })
    .on("mouseout", function(d, i) {
        d3.select(this).attr("fill", function() {
            return "" + color(this.id) + "";
        });
    });

bars.append("title")
    .text(function(d) {
        return "";
    });

Answer 1

执行此操作的一种方法如下：

添加一个工具提示div元素，您将默认为该元素不可见，并且可以通过d3以编程方式更新数据，并在鼠标悬停事件期间使其可见。

<style>
#tooltip {
  background: rgba(255, 255, 255, 0.92);
  position:absolute;
  height:auto;
  visibility:hidden;
  z-index:9999;
  padding:5px;
  border: 1px solid #ddd;
  padding: 5px 15px 5px 15px;
  font-family: arial, sans-serif;
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
</style>
<div id="tooltip">
  <div id="container">
    <div id="series">y</div>
  </div>
  <span>X: </span><span id="xval"></span><br/>
  <span>Y: </span><span id="yval"></span>
</div>

稍后，您将此添加到代表条形的rect元素中。这应该是相当不言自明的。如果您不清楚任何步骤，请随时发表评论：

.on("mouseover", function(d) {
    d3.select("#tooltip")
      .style("left", x1(d.key) + x0(d.state) + "px")
      .style("top", y(d.value) - 50 + "px")
      .transition()
      .style("visibility", "visible");
    d3.select("#series")
      .text(d.key);
    d3.select('#xval')
      .text(d.state);
    d3.select("#yval")
      .text(d3.format("0.6")(d.value));
});

请注意，我还更改了数据循环，以确保还为每个rect元素存储状态值，以便您可以轻松地将其拉出工具提示。

这是一个工作版本：

https://plnkr.co/edit/EoJbTgmRZ1VXTtmfLd9A?p=preview

PS - 我强烈建议您现在学习如何使用自己的工具提示。可能有一个库，可以满足您所需的一切，但工具提示实现起来相当简单，这样做有助于您提高对使用d3和javascript进行交互式可视化的基本理解。此外，如果您自己动手，那么您可以灵活地自信地制作自定义类型的工具提示，这些工具提示可能更好地满足您的要求，而不是尝试使用具有有限自定义选项的库。

Answer 2

我不太了解d3.js但是这个页面解释了如何在d3条形图中添加工具提示：http://bl.ocks.org/Caged/6476579

希望它会帮助你。

如何添加简单的鼠标悬停信息窗口

2 个答案: