带鱼眼的 d3 气泡图

Question

我正在尝试实施 fish-eye plugin distortion with a bubble chart。

我已经使用 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;
        });
    });

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

非常感谢，菲利普

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

带鱼眼的 d3 气泡图

d3 bubble chart with fisheye

bubble-chart

fisheye

d3.js