tooltip d3js区域图中的roi值 [英] roi value in tooltip d3js area chart

问题描述

我有基于d3js的区域图表@ http://plnkr.co/edit/4EEe7EyGRRUH4lJXpHhr?p =预览&这里 http://jsfiddle.net/g30zhvy8/ 其中以前使用数据，后者使用数据，都有工作代码以显示工具提示。

I have d3js based area chart @ http://plnkr.co/edit/4EEe7EyGRRUH4lJXpHhr?p=preview & here http://jsfiddle.net/g30zhvy8/ where former uses datum and latter uses data, both have working code to display tooltip.

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

首先为什么工具提示似乎比图表的zindex更少
其次如何显示值最接近给定的或在区域图中的特定点的工具提示中插入的。类似的问题在几个地方被问过。

Firstly why the tooltip appears to have less zindex than chart's Secondly how to show the values closest to given one's or interpolated one's in tooltip for a particular point in area chart. similar question been asked at several places.

此工具提示代码适用于其他d3js风味的图表，如bar，pie，donut，line等等。

This tooltip code works for remaining d3js flavored charts such as bar, pie, donut, line, etc

推荐答案

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

Tooltip has less z index: Its because you are creating the tooltip first then the path so the path will be in front of tool tip. In svg there is no concept of z-index. So we need to make the path first then later make the tooltip.

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

To get the tooltip on mouse hover do the following(comments in the snippet below):

  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
    });;

工作代码此处

希望这有助于！

这篇关于tooltip d3js区域图中的roi值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！