D3 간단한 산포도에서 어안 왜곡

Question

간단한 산점도에서 d3 어안 왜곡 (http://bost.ocks.org/mike/fisheye/)을 구현하려고합니다. 여기

내가 지금까지 가지고있는 코드 : http://plnkr.co/edit/yDWld6?p=preview

나는 왜곡에 대한 원을 호출하는 방법을 아주 확실입니다. 현재로서는 이렇게 보이지만 지금까지는 "mousemove"에서 아무 일도 일어나지 않습니다.

svg.on("mousemove", function() { 
    fisheye.center(d3.mouse(this)); 

    circles 
    .selectAll("circle") 
    .each(function (d) { d.fisheye = fisheye(d); }) 
    .attr("cx", function (d) { return d.fisheye.pages }) 
    .attr("cy", function (d) { return d.fisheye.books }); 
}); 

감사합니다.

Answer 1

당신은 어안 플러그인에 대한 데이터를 준비해야 :

var circles = svg.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .datum(function(d) { 
     return {x: d.pages, y: d.books} // change data, to feed to the fisheye plugin 
    }) 
    .attr("cx", function (d) {return d.x}) // changed data can be used here as well 
    .attr("cy", function (d) {return d.y}) // ...and here 
    .attr("r", 2); 

... 

// now we can pass in the d.x and d.y values expected by the fisheye plugin... 
circles.each(function(d) { d.fisheye = fisheye(d); }) 
    .attr("cx", function(d) { return d.fisheye.x; }) 
    .attr("cy", function(d) { return d.fisheye.y; }) 
    .attr("r", function(d) { return d.fisheye.z * 2; }); 
}); 

나는 또한 내가 아래에 링크 쿵하는 소리에 사용되는 플러그인의 최신 official version에 따라 어안의 선언을 변경했다.

이렇게 산란계 왜곡이 산점도에 적용된 PLUNK입니다.