响应式 d3 气泡图

Question

我正在尝试实现一个响应式 d3 气泡图，在调整页面大小时更新其容器 svg（及其包含的节点）（有点像这样显示：http://jsfiddle.net/63K4n/）

但是，除了将节点缩小到适合屏幕的大小之外，我还想增加容器的高度，因为宽度正在减小，以便为节点在不缩小的情况下落入所需的额外空间。

我尝试将小提琴的最后几行更新为此...

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

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

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

如果无法使用标准气泡图，我也很乐意尝试静态力布局（例如http://bl.ocks.org/mbostock/1667139）结合可调整大小的示例，例如http://bl.ocks.org/mbostock/3355967。再次，问题是找到一种方法将节点重塑到新容器的范围内，所以我猜我必须调整碰撞检测以解决 svg 容器边界。随着这一切的发生，我很确定在您等待强制布局进入我可以更新页面的内容时，移动设备上会有相当大的延迟。

抱歉，如果这有点含糊不清，但我真的只是希望有人对解决问题的适当方法提出一般性建议。非常感谢您的任何想法！

Answer 1

当发生调整大小事件时，调用函数：

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

要清除当前图表，然后将新的高度/大小信息传递给重绘图表的更新函数。如果没有您的代码和卡在哪里，很难给您一个更具体的答案……但这通常是我在数据或其他常规事物发生变化时重绘 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");

更改直径和 veiwBox 属性可以使所有内容以适当的比例缩小。对不起，如果我错过了理解这个问题，如果我仍然没有得到它。但是根据窗口变化提供新数据的重绘函数应该可以工作。

另外，只是改变

var height = XXX

看起来它不会改变高度，因为

.attr('width',diameter)

使用直径而不是高度。

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