0

我正在尝试使用气泡图实现鱼眼插件失真。

我已经使用文档和其他示例为此制定了所有方法。

使用：

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

请参阅我的小提琴示例。

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

注意：我尝试在鱼眼调用中添加 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;
        });
    });

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

非常感谢，菲利普

4

1 回答 1

1

更改属性不会自动更新图形。您需要使用新的鱼眼属性重新绘制svg。这是您更新的小提琴。

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; });
});
于 2015-02-16T16:26:17.513 回答