D3 툴팁 전환 문제가있는 여러 선 차트

Question

d3을 사용하여 포커스 및 컨텍스트 브러싱을 사용하여 여러 선 차트를 만들었습니다. 전환시 툴팁이있는 데이터 점의 점이 완전히 잘못된 위치로 이동하는 것을 제외하고는 모든 것이 잘 진행되고 있습니다. 나는 이것이 무엇을 일으키는 지 알 수 없다. 어떤 도움이라도 대단히 감사 할 것입니다. 나는 여기에 전체 코드를 부착 내가 버그가해야 확신 그래프에 주목 : 버튼을 클릭하면

http://jsbin.com/osumaq/20/edit

, 새로운 JSON 읽고 그래프로 전달됩니다.

내가 생각하는 코드의 버그 블록은 이것이다 :

topicEnter.append("g").selectAll(".dot") 
     .data(function (d) { return d.values }).enter().append("circle").attr("clip-path", "url(#clip)") 
     .attr("stroke", function (d) { 
     return color(this.parentNode.__data__.name) 
    }) 
     .attr("cx", function (d) { 
     return x(d.date); 
    }) 
     .attr("cy", function (d) { 
     return y(d.probability); 
    }) 
     .attr("r", 5) 
     .attr("fill", "white").attr("fill-opacity", .5) 
     .attr("stroke-width", 2).on("mouseover", function (d) { 
     div.transition().duration(100).style("opacity", .9); 
     div.html(this.parentNode.__data__.name + "<br/>" + d.probability).style("left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px").attr('r', 8); 
     d3.select(this).attr('r', 8) 
    }).on("mouseout", function (d) { 
     div.transition().duration(100).style("opacity", 0) 
     d3.select(this).attr('r', 5); 
    }); 

가 대단히 감사합니다.

Answer 1

툴팁이란 무엇입니까? 우리가 점들을 가리킬 때 나타나는 창입니까? 그들은 괜찮아 보인다. 내가 볼 수있는 것은 선이있는 동안 점들이 움직이지 않는다는 것입니다. 내가 추측해야만한다면 입력과 업데이트 선택 항목이 섞여 있다고 말할 수 있습니다. 점은 화면에 이미 당신은 당신이 라인을 따라 뭔가를해야만해야한다 (당신의 방법을 update 호출하여) 자신의 위치를 ​​업데이트하려면 :

// Bind your data 
topicEnter.append("g").selectAll(".dot") 
    .data(function (d) { return d.values }) 
// Enter selection 
topicEnter.enter().append("circle").attr("clip-path", "url(#clip)").attr("class", "dot"); 
// Update all the dots 
topicEnter.attr("stroke", function (d) { 
     return color(this.parentNode.__data__.name) 
    }) 
    .attr("cx", function (d) { 
     return x(d.date); 
    }) 
    .attr("cy", function (d) { 
     return y(d.probability); 
    }) 
    [...]