Question

我在D3中使用鼠标悬停事件中的工具提示工作。我所拥有的是在点的右侧和上方稍微显示的数据。但是，这是一个折线图，这有时是不可读的。我想要的是在某个固定位置显示的数据（我已经确定右上角没有杂乱）。谁能给我一些建议？代码

 .on("mouseover", function(d) {
      d3.select(this).attr("r", 5.5).style("fill", "red");

      tooltip.transition()
           .duration(200)
           .style("opacity", .9);

      tooltip.html("(" + xTemp(d) 
      + ", " + yTemp(d)+ ")")
          .style("left", (d3.event.pageX + 5) + "px")
          .style("top", (d3.event.pageY - 28) + "px");

Answer 1

我认为您的工具提示是<div> position: absolute。

在这种情况下，您可以将SVG包装在容器div中（因为SVG不支持offsetTop和offsetLeft）并使用offsetTop设置工具提示的位置和offsetLeft。

这是一个简单的演示。我放了两段（＆＃34; Foo＆＃34;和＆＃34; Bar＆＃34;），所以你可以看到<div>的位置是正确的，即使SVG不是第一个元素在页面上：

＆＃13;

var svg = d3.select("svg");
var tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);
svg.selectAll(null)
  .data(d3.range(50, 300, 50))
  .enter()
  .append("circle")
  .attr("cx", Number)
  .attr("cy", 100)
  .attr("r", 20)
  .style("fill", "teal")
  .on("mouseover", function(d) {
    d3.select(this).style("fill", "red");
    tooltip.html(d)
      .style("top", svg.node().parentNode.offsetTop + 10 + "px")
      .style("left", svg.node().parentNode.offsetLeft + 270 + "px")
      .style("opacity", .9);
  })
  .on("mouseout", function() {
    d3.select(this).style("fill", "teal")
    tooltip.style("opacity", 0)
  })

＆＃13;

svg {
  border: 1px solid gray;
}

.tooltip {
  position: absolute;
  broder: 1px solid black;
  background-color: tan;
  padding: 2px;
  border-radius: 2px;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Foo</p>
<p>Bar</p>
<div>
  <svg id="svg"></svg>
</div>

＆＃13;

D3：鼠标悬停在右上角显示数据

1 个答案: