Question

是否可以将缩放添加到圆形包中？看起来它应该是，但是当点击缩放时我的所有地方都会跳跃。我试图解决这个问题几天但收效甚微。

我一直在引用Mike的Zoomable Circle Packing块（＃7607535）和nilanjenator的块（＃4950148）。其他例子似乎是基于这两个。这是我正在进行的工作的一小部分：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; });

另外，当我点击背景时，我无法重置（缩小？）。我相信它没有获得数据＆＃39; ...

的价值

//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：这个依赖于翻译移动圈子。

所以在你的例子中：你混合了两者，因此你得到了不同的圆形包装。

您创建了圆圈并使用平移将其移动到了位置，但在缩放部分中您使用了更改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); 
    });

我改变了你在这里提供的小提琴是一个有效的例子： http://jsfiddle.net/cyril123/khq21pgb/2/

希望这有用！

D3将缩放添加到圆形包

1 个答案: