D3.js 响应d3气泡图

我试图实现一个响应性d3气泡图，在调整页面大小时更新其容器svg（及其包含的节点）（有点像下图所示：）

但是，我不只是将节点缩小到适合屏幕的大小，而是希望随着宽度的减小而增加容器的高度，以便在不缩小的情况下创建节点所需的额外空间

我把小提琴的最后几行升级到这个

chart.attr("width", targetWidth);
chart.attr("height", Math.round(921600/targetWidth)); //was targetWidth/aspectRatio

（其中921600只是直径[960]的平方-即所需的总空间）

当然，尽管这样可以正确地增加容器的高度，但节点并没有利用新空间——这正是我努力想弄明白的——如何改变气泡图的形状以适应新空间（如果可能的话！）

如果无法使用标准气泡图，我也很乐意尝试静态力布局（例如）与可调整大小的示例（如）相结合。同样，问题是找到一种方法来重新塑造节点，使其位于新容器的范围内，因此我猜我必须调整碰撞检测以考虑svg容器边界。在所有这些情况下，我敢肯定，当你在等待force布局指向我可以更新页面的内容时，移动设备上会有相当大的延迟

---

抱歉，如果这一切都有点模糊，但我真的只是希望有人有一个适当的方法来解决这个问题的一般性建议。非常感谢您的任何想法

发生调整大小事件时，使用以下命令调用函数：

d3.selectAll('#chart svg').remove()

要清除当前图表，请将新的高度/大小信息传递到更新函数中，该函数将重新绘制图表。如果没有你的代码和你的困境，很难给你一个更具体的答案……但当数据或其他groovy东西发生变化时，我通常就是这样重新绘制我的D3内容的

好的，从两个小提琴/密码笔来看

var diameter = 500, // <---Feed new variable here
format = d3.format(",d"),
color = d3.scale.category20c();

var width = 450, height = 2000;

var bubble = d3.layout.pack()
   .sort(null)
   .size([diameter, diameter])
   .padding(1.5);

var svg = d3.select("body").append("svg")
   .attr("viewBox","0 0 500 500") //<----and Here
   .attr("width", diameter)
   .attr("height", diameter)
   .attr("class", "bubble");

看起来不像是在改变高度，因为

.attr('width',diameter)

正在使用直径而不是高度

---

无论如何，我希望这能有所帮助。

谢谢蒂姆，但如果我用气泡图的方法，我最终会遇到同样的问题，我的节点会缩小以适应更小的屏幕大小（就像在中发生的那样）。然而，如果我使用force布局方法，我必须集成某种绑定冲突检测，比如（与现有节点之间的冲突检测），这将导致在移动设备（和firefox）上响应不良-仅仅更新容器并重新绘制布局是不够的-节点超出了容器的边界。气泡图上的一个快速示例显示了我所说的内容：。我已经给出了足够的高度（2000px）来解释相对较短的宽度（450），但显然气泡不会自动流入新的空间-我需要找到一种方法将图表形状调整到新的维度。我不理解这个问题（现在可能仍然是），无论如何，我已经编辑了我的答案…嗨，蒂姆，再次感谢大家的努力，但我不想缩小气泡图中的节点。我正在寻找一种方法，使用容器中的可用空间重新定位它们（在我发布的代码笔中，该空间显示在容器的底部，但当然我还无法获得水平剪切的节点以显示在下面）。所以我试图改变气泡图的形状（从宽度/高度相等的形状改为高度更大的形状）。谢谢。哦，我终于明白了……对不起，我没能给你指出正确的方向。

.attr('width',diameter)