d3.js中多行的动态工具提示 [英] dynamic tooltip for multiline in d3.js

问题描述

我正在建立一个复杂的多线图与缩放，刷牙，复选框等。我能够得到这一切工作，但坚持让工具提示工作。
我想得到这样的东西

http://bl.ocks.org/benjchristensen/2657838

在特定x cordinate中具有所有路径值的线

  var vertical = d3.select（＃main-graph）
 .append（div）
。 attr（class，remove）
 .style（position，absolute）
 .style（z-index，19）
 .style width，1px）
 .style（height，380px）
 .style（top，10px）
 .style（bottom，30px ）
 .style（left，0px）
 .style（background，#fff）; 
 
 d3.select（＃main-graph）
 .on（mousemove，function（）{
 mousex = d3.mouse（this）; 
 mousex = mousex [0] + 220; 
 vertical.style（left，mousex +px）}）
 .on（mouseover，function（）{
 mousex = d3.mouse（this）; 
 mousex = mousex [0] +220; 
 vertical.style（left，mousex +px）}）; 
}）; 
  

目前我有上面的代码来获取行。我怎么会得到所有的行数据悬停现在。感谢任何帮助！

解决方案

使用 scale.invert 函数从mousex值获取实际值。

  var xValue = xScale.invert（mousex）; 
  

一旦你有xValue，使用数组平分线找到数组中的值的索引。

声明二分函数：

  var bisectDate = d3.bisector（function（d）{return d.date;}）。 
  

，其使用方法如下：

  var index = bisectDate（data，xValue，1）; 
  

一旦获得索引，就可以选择最接近索引，索引-1和索引+ 1值，并从数据中获取所有yValues和xValues。

  var finalIndex = getDesiredIndex（data，index）; //实现getDesiredIndex获取左，右或中心任何你认为是完美的图形的索引。 
  

我的假设是你的数据在对象数组的from。所以 data [finalIndex] .yValue1，data [finalIndex] .yValue2 .....应该是你正在寻找的。

如果你需要我为你提供更具体的实现或工作示例，那么添加一个jsFiddle，我可以为你编辑它。

I'm building a complicated multiline graph with zoom, brushing, checkboxes etc. I was able to get this all work but stuck in getting the tooltip working. I would like to get something like this

http://bl.ocks.org/benjchristensen/2657838

A line with all the path value at a particular x cordinate

var vertical = d3.select("#main-graph")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "380px")
.style("top", "10px")
.style("bottom", "30px")
.style("left", "0px")
.style("background", "#fff");

d3.select("#main-graph")
.on("mousemove", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 220 ;
vertical.style("left", mousex + "px" )})
.on("mouseover", function(){  
mousex = d3.mouse(this);
mousex = mousex[0] +220 ;
vertical.style("left", mousex + "px")});
});

Currently i've this above code to get the line. How would i go about getting the data of all the lines on hover now. Appreciate any help!

解决方案

Use scale.invert function to get the actual value from the mousex value.

var xValue = xScale.invert(mousex);

Once you have the xValue, use array bisector to find the index of the value in the array.

To declare the bisector function:

var bisectDate = d3.bisector(function(d) { return d.date; }).left;

and here's how to use it:

var index = bisectDate(data, xValue, 1);

Once you have the index, then you can choose the nearest between index, index - 1 and index + 1 values and get the all the yValues and xValues from the data.

var finalIndex = getDesiredIndex(data, index); //Implement getDesiredIndex to get the left, right or center whatever index you think is perfect for your graph.

my assumption is that your data is in the from of array of objects. So data[finalIndex].yValue1, data[finalIndex].yValue2 ..... should be what you are looking for.

If you need me to provide you with more concrete implementation or working example then add a jsFiddle and I can edit it for you.

这篇关于d3.js中多行的动态工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！