修复响应式SVG突破Bootstrap网格？

Question

示例代码：http://codepen.io/mattrice/full/peXeqd/

我想要的是让SVG完全包含在父级给定的宽度内（本例中为6列，但可以是任何其他任意宽度的网格元素）。

此示例在宽度<768px时按预期运行，因为Bootstrap列是整页宽度;但是，当Bootstrap列回流到高于768的宽度水平堆叠时，SVG会占用页面的整个宽度。

我认为问题源于updateDimensions()中render()的争论：

 function render() {
    updateDimensions(window.innerWidth);

    ...<snip>...
  }

我也尝试了getBoundingClientRect()

 function render() {
    updateDimensions(d3.select(options.selector).node().getBoundingClientRect().width);

    ...<snip>...
  }

但这导致了一些奇怪的结果（可能超出了这个问题的范围）。

我该如何解决这个问题？

Answer 1

如果您希望SVG缩放以适合其父元素，则需要具有viewBox属性。

而不是设置SVG的width和height，而是使用viewBox的值。

更改

.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);

到

.attr("viewBox", [0, 0, (width + margin.right + margin.left),
                        (height + margin.top + margin.bottom)].join(' '))

Updated Codepen

如果需要，您可能需要调整viewBox的宽度和高度组件，以消除右侧的间隙，使其更加整齐。