0

我有一个问题，我真的需要你的帮助。我有一个带有随光标移动的垂直条的实时图表，我希望它在光标指向时显示图表的值（d.time 和 d.value）。我试图从这里获得工具提示的启发：http: //bl.ocks.org/WillTurman/4631136 adn 这就是我所做的：http: //jsfiddle.net/QBDGB/54/我有两个系列随机生成的数据（data1s 和 data2s），我将生成数据的时间放在“时间”变量中，如您所见：

now = new Date(Date.now() - duration);

var data1 = initialise();
var data2 = initialise();


 //Make stacked data

var data1s = data1;
var data2s = [];
for(var i = 0; i < data1s.length; i++){
data2s.push({
value:  data1s[i].value + data2[i].value,
time: data2[i].time
}  
 )};

 function initialise() {

 var arr = [];
 for (var i = 0; i < n; i++) {
     var obj = {
 time: Date.now(),
 value: Math.floor(Math.random() * 100)
};
     arr.push(obj);
 }

 return arr;

}

当我将鼠标悬停在图表上时，我希望工具提示显示时间和值，但它无法识别它并显示“未定义”，因为我不知道如何传递我的数据集（data1s 和 data2s），因此“鼠标悬停功能可以识别哪些数据show! 这就是工具提示函数的制作方法，并从“path1”和“path2”调用。

function mouseover() {
     div.transition()
    .duration(500)
    .style("opacity", 1);
}

function mousemove(d) {



 div
  .text( d.time+ ", " + d.value)
  .style("left", (d3.event.pageX ) + "px")
  .style("top", (d3.event.pageY ) + "px");
 }

  function mouseout() {
   div.transition()
  .duration(500)
  .style("opacity", 1e-6);
 }

var path1 = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .data([data1s])
    .attr("class", "line1")
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout);


  var path2 =svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .data([data2s])
    .attr("class", "line2")
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout);

你知道该怎么做吗？正如您在http://bl.ocks.org/WillTurman/4631136中看到的，这些层可以通过以下方式识别 

   svg.selectAll(".layer")
    .attr("opacity", 1)
     .on("mouseover", function(d, i) {
      svg.selectAll(".layer").transition()
  .duration(250)
  .attr("opacity", function(d, j) {
    return j != i ? 0.6 : 1;
     })})

.on("mousemove", function(d, i) {
  mousex = d3.mouse(this);
  mousex = mousex[0];
  var invertedx = x.invert(mousex);
  invertedx = invertedx.getMonth() + invertedx.getDate();
  var selected = (d.values);
  for (var k = 0; k < selected.length; k++) {
    datearray[k] = selected[k].date
    datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
  }

并且可以为每一层添加“mousemove”功能，但我怎样才能为我的每条路径添加这个功能？

谢谢，

4

0 回答 0