修復響應SVG突破Bootstrap網格？

Question

例Codepen：http://codepen.io/mattrice/full/peXeqd/

我想是用於SVG留父給定寬度內完全包含（6列對於此示例，但也可以是任何其他任意寬度柵格元件）。

此示例的功能如預期寬度< 768px，因爲引導列是整頁寬度;然而，當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的寬度和高度的組件，如果你想，刪除右邊的差距，所以它更合適。