d3 带鱼眼气泡图

Posted 2023-02-25

【中文标题】d3 带鱼眼气泡图

【英文标题】：d3 bubble chart with fisheye

【发布时间】：2015-02-16 15:32:38

【问题描述】：

我正在尝试使用bubble chart 实现fish-eye 插件失真。

我已经为此做了所有的方法，使用documentation 和其他示例。

使用：

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

    node.each(function (d) 
        d.fisheye = fisheye(d);
    )
        .attr("r", function (d) 
        return d.fisheye.r * 2;
    );
);

和

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

请参阅我的fiddle 示例。

当我将鼠标移到气泡上时，将它应用到浏览器上没有任何附加内容。

注意：我尝试在鱼眼调用中添加 cx 和 cy 属性，但我的图表没有实现这两个坐标。是这个原因吗？

例子：

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

        node.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.r * 2;
        );
    );

是否有任何解决方案，或者我正在尝试实现目前无法实现的东西？

非常感谢， 菲利普

【参考方案1】：

更改属性不会自动更新图形。您需要使用新的 fisheyed 属性重新绘制 svg。这是你的updated fiddle。

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

    node.each(function (d) 
        d.fisheye = fisheye(d);
    );

     node.selectAll("circle")
          .attr("cx", function(d)  return d.fisheye.x - d.x; )
          .attr("cy", function(d)  return d.fisheye.y - d.y; )
          .attr("r", function(d)  return d.fisheye.z * d.r; );

      node.selectAll("text")
          .attr("dx", function(d)  return d.fisheye.x - d.x; )
          .attr("dy", function(d)  return d.fisheye.y - d.y; );
);