响应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容器边界。有了这些，我敢肯定，在移动设备上，当你等待force布局的时候，会有一个很好的延迟，我可以更新页面。

对不起，如果这有点模糊，但我真的只是希望有人对解决这个问题的适当方法有一个大概的建议。非常感谢你的任何想法!

Answer 1

当一个resize事件发生时，调用一个函数:

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

清除当前图表，然后将新的高度/大小信息传递给一个更新函数，该函数将重新绘制图表。如果没有你的代码和你卡住的地方，很难给你一个更具体的答案……但这通常是我如何重画我的D3的东西，当数据或其他groovy的东西改变。

好的，根据两个fiddle/code笔，它看起来像

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)

使用的是直径而不是高度。

无论如何，我希望这对你有帮助。