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)

使用直径而不是高度。

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

响应式d3气泡图

1 个答案: