어안을 사용하는 d3 프로젝트가 있는데 왜 데이터 포인트에서 마우스를 가리켜 야합니까

Question

여기 a link of my demo입니다! 명확하지 않은 경우 link of fisheye demo2을 참조하십시오.

fisheye.copy = function() { 
    return d3_fisheye_scale(scale.copy(), d, a); 
}; 

fisheye.nice = scale.nice; 
fisheye.ticks = scale.ticks; 
fisheye.tickFormat = scale.tickFormat; 
return d3.rebind(fisheye, scale, "domain", "range"); 

나는 어안이 부드럽게 움직이기를 원합니다. 즉 평범한 공간을 지나갈 때, 어안도 그럴 것입니다.

Answer 1

부부 문제 :

1) 당신은 몇 당신의 TSV 파일의 끝 부분에 빈 줄이 당신의 음모에 가짜 데이터를 소개하고 있습니다.

2.) 서클을 g 요소로 묶었습니다. g 그룹은 "빈"컨테이너이며 마우스 이벤트를받지 못합니다. 한 가지 트릭을 사용하면 빈 공간을 rect과 같은 요소로 채울 수 있습니다.

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append("rect") 
    .attr('fill','none') 
    .attr('pointer-events', 'all') 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .attr("class","chartArea"); 

그런 다음 마우스 오버가된다 :

d3.select(".chartArea").on("mousemove", function() { 
    fisheye.focus(d3.mouse(this)); 
    ... 

이 example 업데이트되었습니다.