javascript - 如何根据内容设置SVG(由D3.js绘制)的高度？

我正在使用D3.js绘制一棵树，与此图表相同:
http://bl.ocks.org/mbostock/7809166
但是高度和宽度是固定的，我想通过内容自动调整高度。

我的代码:

var svg = d3.select("#feature_tree").append("svg")
  .attr("width", width + margin.right + margin.left)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

如果我没有定义高度，则无法完全显示树，除非我扩大浏览器，否则可以显示丢失的树节点。

如果我定义高度，例如高度= 2400像素；如果内容很短。会有很大的空白。

最佳答案

您可以测量内容的高度并相应地调整SVG元素:

var svgEl = document.getElementById("my-svg"),
    bb = svgEl.getBBox();
svgEl.style.height = bb.y + bb.height;
svgEl.style.width = bb.x + bb.width;

这里的简单演示:http://codepen.io/anon/pen/gpwbKd