Question

我尝试构建一个工具提示，如此处所述： D3 Tooltip Example
但我想将div作为工具提示。现在，我有将div定位到聊天行的问题。我的代码：

var div = d3.select("#chart").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

var path = svg.append("path") // Add the line path.
  .data(data)
  .attr("class", "line")
  .attr("d", line(data));

var focus = svg.append("g")
  .attr("class", "focus")
  .style("display", "none");

focus.append("text")
  .attr("x", 9)
  .attr("dy", ".35em");

svg.append("rect")
  .attr("class", "overlay")
  .attr("width", width)
  .attr("height", height)
  .on("mouseover", function() {
    focus.style("display", null);
  })
  .on("mouseout", function(d) {
    div.transition()
      .duration(50)
      .style("opacity", 1e-6);
  })
  .on("mousemove", mousemove);

function mousemove() {
  var x0 = x.invert(d3.mouse(this)[0]),
    i = bisectDate(data, x0, 1),
    d0 = data[i - 1],
    d1 = data[i],
    d = x0 - d0.date > d1.date - x0 ? d1 : d0;

  //move focus around
  focus.attr("transform", "translate(" + x(d.date) + "," + y(d.equity) + ")");
  div.transition()
    .duration(50)
    .style("opacity", .9);
  div.html("<strong><table><tr><th>Datum:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th><th>" + formatTime(d.date) + "</th></tr><tr><th>Equity:</th><th>" + Euro(d.equity) + "</th></tr></table></strong>")
  //     .style("left", (d3.event.pageX) + "px")
  //       .style("top", (d3.event.pageY - 1100) + "px");
  ;
}

Fiddle

上的完整示例

是否可以将div相对于鼠标所在的svg线定位？

Answer 1

使用left和top更改div位置最适合HTML工具提示：https://jsfiddle.net/da3nx51L/

div.transition()
   .duration(50)
   .style('left', d3.event.clientX + "px")
   .style('top', d3.event.clientY + "px")
   .style('display', 'inline-block')
   .style("opacity", .9);

Answer 2

取消注释最后两行，并从顶部删除-1100

.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");

Javascript D3位置工具提示到图表

2 个答案: