使用D3添加魚眼鏡頭軸JS

Question

我有this visualization，我試圖將魚眼視圖添加到圖表中。我試圖與在plotData功能下面幾行加入它，但它不會發生：

var fisheye = d3.fisheye.circular() 
      .radius(120); 

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

     circle.each(function (d) { 
      d.fisheye = fisheye(d); 
     }); 
    }); 

如何解決這個任何想法？

謝謝！

Answer 1

首先，你的d3.timer永不停止運行。這使我的機器瘋狂（cpu 100％）並且殺死了魚獸的表現。我真的不確定你在那裏做什麼，所以忽略了一會兒。

你的魚眼需要一點點按摩。首先，它希望您的數據像素的位置存儲在d.x和d.y屬性中。可以在繪製你的圈子時捏造這樣的：

 circle 
     .attr("cx", function(d, i) { d.x = X(d[0]); return d.x; }) 
     .attr("cy", function(d, i){ d.y = Y(d[1]); return d.y; }); 

其次，要在多個步驟繪製你的數據，所以你需要選擇魚眼各界。第三，你忘了，實際上使得點擴展和收縮代碼：

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

    // select all the circles 
    d3.selectAll("circle.data").each(function(d) { d.fisheye = fisheye(d); }) 
     // make them grow and shrink and dance 
     .attr("cx", function(d) { return d.fisheye.x; }) 
     .attr("cy", function(d) { return d.fisheye.y; }) 
     .attr("r", function(d) { return d.fisheye.z * 4.5; }); 

}); 

更新example。