javascript - 工具提示 d3js 面积图中的 roi 值

Question

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

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

首先，为什么工具提示的 zindex 似乎比图表的 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

希望这有帮助!