javascript - 修复响应式 SVG 脱离 Bootstrap 网格的问题？

Question

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

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

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

我认为问题源于 render() 中 updateDimensions() 的参数:

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

    ...<snip>...
  }

我也尝试过 getBoundingClientRect() 像这样

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

    ...<snip>...
  }

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

我该如何解决这个问题？

Answer 1

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

不要设置 SVG 的宽度和高度，而是将这些值用于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 的宽度和高度组件，以消除右侧的间隙，使其更加整齐。