D3 将缩放添加到圆形包

Question

是否可以为圆形包添加缩放功能？看起来应该是这样，但是当单击缩放时，我的会到处乱跳。这几天我一直在尝试解决这个问题，但收效甚微。

我一直在参考 Mike 的 Zoomable Circle Packing 积木 (#7607535) 和 nilanjenator 的积木 (#4950148)。其他例子似乎都是基于这两个。这是我正在进行的工作的 fiddle：http://jsfiddle.net/cajmcmahon/9weovdm2/5/.

据我所知，我的布局问题出在这两个函数上：

t.selectAll("circle")
        .attr("cx", function(d) {
            return x(d.x);
        })
        .attr("cy", function(d) {
            return y(d.y);
        })
        .attr("r", function(d) {
            return k * d.r;
        });

t.selectAll("text")
        .attr("x", function(d) {
            return x(d.x);
        })
        .attr("y", function(d) {
            return y(d.y);
        })
        .style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });

此外，当我单击背景时，我无法重置可视化（缩小？）。我相信它没有获得 'data'...

的值

//Reset when click on background
    d3.select(window).on("click", function(d, i) {
        zoom(data)
    });

感谢您的帮助。

Answer 1

好的两个例子：

输出相同，但实现方式不同。

http://bl.ocks.org/nilanjenator/4950148:这个是靠改变圆的cx和cy来移动和更新半径来达到缩放效果的
http://bl.ocks.org/mbostock/7607535: 这个是靠translate移动圆圈的

因此在您的示例中：您将两者混合，因此得到了不同风味的圆形包装。

您创建了圆圈并使用平移将其移动到它们的位置，但在缩放部分您使用了更改 cx 和 cy，结果您的圆圈在缩放时飞出包装。

我已经删除了翻译并提供了 cx 和 cy，因此缩放功能与您编写的相同。

node.append("circle")
    .attr("r", function(d) {
        return d.r;
    })
     .attr("class", function(d) { return d.children ? "parent" : "child"; })
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })

    .on("click", function(d) { 
        zoom(node == d ? root : d); 
    });

我已经更改了 fiddle 你在这里给出的是一个工作示例： http://jsfiddle.net/cyril123/khq21pgb/2/

希望对您有所帮助！

D3 将缩放添加到圆形包

D3 add zoom to circle pack

d3.js

zooming

circle-pack