자바 스크립트에서 동그라미 렌더링 문제

Question

내 그래프에 http://jsfiddle.net/6cJ5c/10/과 같은 툴팁을 사용하려고합니다. 그게 내 실시간 그래프의 결과입니다. http://jsfiddle.net/QBDGB/52/ 왜 원과 그래프 사이에 간격이 있는지 궁금합니다. 서클의 수직선이 시작 되니? 그것이 시작될 때 원은 곡선에 가깝지만 suddendly 그들은 위아래로 뛰기 시작합니다! 원이 부드럽게 움직이고 곡선의 표면에 붙어 있기를 원합니다. 문제는 그들이 "경로 1"로 움직이지 않는다는 것입니다. 그래서 원을 인식하지 못해서 왜 그들이 separetly로 움직이는 지 또는 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에서 "basis"로, 어느 I found은 B 스플라인 보간입니다. 그린 이 예와 같이, 데이터 세트에서 포인트을 통과하지 않습니다

당신의 포인트를 통해 이동 경로를하지만, 데이터 세트의 점 사이의 단지 직선이다. 보간법을 기본에서 선형으로 업데이트하고 변경하여 그런 식으로 작동한다는 것을 입증했습니다. 나는 또한 움직임을 선형으로 설정하여 덜 흔들 거리게 만듭니다.