使用 D3 JS 将鱼眼添加到轴

Posted 2023-02-25

【中文标题】使用 D3 JS 将鱼眼添加到轴

【英文标题】：Adding fisheye to axes with D3 JS

【发布时间】：2015-07-04 19:38:01

【问题描述】：

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

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

谢谢！

【参考方案1】：

首先，您的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。