D3.js D3将缩放添加到圆包_D3.js_Zooming_Circle Pack

D3.js D3将缩放添加到圆包

d3.js

D3.js D3将缩放添加到圆包,d3.js,zooming,circle-pack,D3.js,Zooming,Circle Pack,是否可以将缩放添加到圆包？看起来应该是这样的，但是当点击缩放时，我的鼠标在周围跳跃。几天来，我一直试图解决这个问题，但收效甚微我一直在引用Mike的可缩放圆形包装块（#7607535）和nilanjenator的包装块（#4950148）。其他例子似乎基于这两个。这是我正在做的一把小提琴：据我所知，我的布局问题在于以下两个功能： t.selectAll("circle") .attr("cx", function(d) { return x(d.x);

是否可以将缩放添加到圆包？看起来应该是这样的，但是当点击缩放时，我的鼠标在周围跳跃。几天来，我一直试图解决这个问题，但收效甚微

我一直在引用Mike的可缩放圆形包装块（#7607535）和nilanjenator的包装块（#4950148）。其他例子似乎基于这两个。这是我正在做的一把小提琴：

据我所知，我的布局问题在于以下两个功能：

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

此外，当我点击背景时，我无法重置viz（缩小？）。我相信它没有得到“数据”的值

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

谢谢您的帮助。

确定两个示例：

具有相同的输出，但实现方式不同

：此选项依赖于更改圆的cx和cy来移动和更新缩放效果的半径

：此选项依赖于“平移”来移动圆

在你的例子中：你混合了这两种，因此你得到了一种不同口味的圆形包装

您创建了圆并使用“平移”将其移动到它们的位置，但在“缩放”区域中，您使用了更改cx和cy的方法，因此，在缩放时圆会飞出包装

我已经删除了translate，并给出了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); 
    });

我已经改变了你给我的小提琴，这是一个有效的例子：

希望这是有帮助的