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

Question

我正在使用 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 像素；如果内容很短。会有很大的空白。

Answer 1

您可以测量内容的高度并相应地调整 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