使用D3 JS向軸添加魚眼

Question

我有此可視化 ，我試圖將魚眼視圖添加到圖表中。 我試圖在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％）並破壞了fishey的性能。 我真的不確定您在那做什么，所以暫時忽略一下。

魚眼需要一點按摩。 首先，它希望將數據像素的位置存儲在dx和dy屬性中。 您可以在畫圓時對此進行修飾：

     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; });

});

更新示例 。