javascript - 使用D3 JS向轴添加鱼眼

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

关于如何解决这个问题的任何想法？

谢谢！

最佳答案

首先，d3.timer永远不会停止运行。这使我的机器发疯（CPU 100％）并破坏了fishey的性能。我真的不确定您在那做什么，所以暂时忽略一下。

鱼眼需要一点按摩。首先，它希望将数据像素的位置存储在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。

关于javascript - 使用D3 JS向轴添加鱼眼，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31224479/