Question

我有基于d3js的区域图@ http://plnkr.co/edit/4EEe7EyGRRUH4lJXpHhr?p=preview＆amp;这里http://jsfiddle.net/g30zhvy8/前者使用数据而后者使用数据，两者都有工作代码来显示工具提示。

 svg.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", area);

首先，为什么工具提示似乎比图表的zindex少其次，如何在面积图中的特定点显示工具提示中最接近给定值或插值值的值。在几个地方也有类似的问题。

此工具提示代码适用于剩余的d3js风格图表，如酒吧，馅饼，甜甜圈，线等

Answer 1

工具提示具有较少的z索引：因为您首先创建工具提示然后创建路径，因此路径将位于工具提示的前面。在svg中，没有z-index的概念。所以我们需要先制作路径，然后再制作工具提示。

要获取鼠标悬停的工具提示，请执行以下操作（下面的代码段中的注释）：

  svg.append("path")
    .data([data]) //this is equivalent to datum(data) 
    .attr("class", "area")
    .attr("d", area)
    .on("mouseover", function() {
      tooltip.style("display", null);
    })
    .on("mouseout", function() {
      tooltip.style("display", "none");
    })
    .on("mousemove", function(d) {
      var xPosition = d3.mouse(this)[0] - 15;//x position of tooltip
      var yPosition = d3.mouse(this)[1] - 25;//y position of tooltip
      tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");//placing the tooltip
      var x0 = x.invert(d3.mouse(this)[0]);//this will give the x for the mouse position on x
      var y0 = y.invert(d3.mouse(this)[1]);//this will give the y for the mouse position on y
      tooltip.select("text").text(d3.time.format('%Y-%m-%d')(x0)+ " " +Math.round(y0));//show the text after formatting the date
    });;

工作代码here

希望这有帮助！

工具提示d3js区域图中的roi值

1 个答案: