javascript渲染圈問題

Question

我想爲我的圖形制作工具提示，如http://jsfiddle.net/6cJ5c/10/，這是我實時圖形的結果：http://jsfiddle.net/QBDGB/52/我想知道爲什麼在圓圈和圖形之間存在差距，爲什麼在開始有一個垂直的圓圈線？當它開始的時候，圓圈接近曲線，但是突然間，他們開始跳起來！我希望圓圈能夠輕柔地移動並粘在曲線的表面上。我認爲問題在於他們沒有使用「path1」，因此它不能識別這些圓圈，因此他們爲什麼會分開移動，或者tooltipis的值與曲線的值不同，因此它們不會重疊！ 。這是數據是如何產生的（價值和時間），工具提示：

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

Answer 1

我認爲你的問題在於你的路的插值。您可以設置點之間的插值你的var area爲「基礎」，其中我found是一個B樣條插值。這意味着區域繪製不經過你的數據集中的點，如本例所示：

你點上移動的路徑，但是，在你的數據集中的點之間只是直線。我更新並將插值從基本變爲線性，以證明它將以這種方式工作。我還將運動的ease（）設置爲線性，這使得它不那麼「跳躍」。 http://jsfiddle.net/QBDGB/53/