1

我正在尝试为我的图表制作如下工具提示：http: //jsfiddle.net/6cJ5c/10/，这就是我的实时图表上的结果：http: //jsfiddle.net/QBDGB/52/ 我想知道为什么会有是圆圈和图形之间的间隙，为什么一开始有一条垂直的圆圈线？当它开始时，圆圈靠近曲线，但突然它们开始上下跳跃！我希望圆圈平滑移动并粘在曲线的表面上。我认为问题在于它们没有与“path1”一起移动，因此它无法识别圆圈，这就是它们分开移动的原因，或者工具提示的值可能与曲线的值不同，因此它们不会重叠！ . 这就是数据的生成方式（值和时间）和工具提示：

var data1 = initialise();  
var data1s = data1;

 function initialise() {

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

 // push a new element on to the given array
function updateData(a) {
 var obj = {
 time: Date.now(),
 value: Math.floor(Math.random() * 90)
  };
 a.push(obj);
   }


 var formatTime = d3.time.format("%H:%M:%S");

  //tooltip

  var div = d3.select("body").append("div")
   .attr("class", "tooltip")
    .style("opacity", 0);

   var blueCircles = svg.selectAll("dot")
    .data(data1s)
    .enter().append("circle")
        .attr("r", 3)
        .attr("cx", function(d) { return x(d.time); })
        .attr("cy", function(d) { return y(d.value); })
        .style("fill", "white")
        .style("stroke", "red")
        .style("stroke-width", "2px")
        .on("mousemove", function(d ,i) {
            div.transition()
                .duration(650)
                .style("opacity", .9);
            div.html(formatTime(new Date(d.time)) + "<br/>" + d.value)
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function(d ,i ) {
            div.transition()
                .duration(650)
                .style("opacity", 0);
        });
         blueCircles.data(data1s)
        .transition()
        .duration(650)
        .attr("cx", function(d) { return x(d.time); })
        .attr("cy", function(d) { return y(d.value); });

请告诉我您的意见，因为我真的需要它:(正如我所说，也许我应该在“路径”中添加“鼠标悬停和鼠标移动功能”以使其识别工具提示。如下所示。但我也不太确定： (

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

1 回答 1

0

我认为您的问题在于路径的插值。您将点之间的插值设置var area为“基础”，我发现这是一个 B 样条插值。这意味着绘制的区域不会穿过数据集中的点，如下例所示： 在此处输入图像描述

但是，您的点移动的路径只是数据集中点之间的直线。我更新并将插值从基本更改为线性，以证明它会以这种方式工作。我还将运动的 ease() 设置为线性，这使它不那么“跳跃”。http://jsfiddle.net/QBDGB/53/

于 2013-07-22T01:22:08.133 回答