Fix reaktionsfreudige SVG brechen aus Bootstrap-Grid?

Question

Beispiel Codepen: http://codepen.io/mattrice/full/peXeqd/

Was ich will, ist für die SVG vollständig innerhalb der Eltern gegebenen Breite enthalten bleiben (6 Spalten für dieses Beispiel, könnte aber jede beliebige andere Breite Gitterelement sein).

Dieses Beispiel funktioniert wie erwartet bei den Breiten < 768px, da die Bootstrap-Spalten volle Seitenbreite haben; Wenn die Bootstrap-Spalten jedoch bei einer Breite über 768 wieder horizontal gestapelt werden, nimmt das SVG die gesamte Breite der Seite ein.

denke ich, das Problem von den Argumenten ergibt sich auf updateDimensions() in render():

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

    ...<snip>... 
    } 

Ich habe auch versucht getBoundingClientRect() wie so

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

    ...<snip>... 
    } 

aber das führte zu einigen ungerade Ergebnisse (wahrscheinlich außerhalb der Umfang dieser Frage).

Wie kann ich das beheben?

Answer 1

Wenn Sie möchten, dass das SVG an das übergeordnete Element angepasst wird, muss es ein viewBox Attribut haben.

Anstelle der width und height Ihres SVG, verwenden Sie stattdessen diese Werte für die viewBox.

ändern

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

zu

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

Updated Codepen

Sie sollten die Breite und Höhe Komponenten des viewBox zwicken, wenn Sie wollen die Lücke auf der rechten Seite zu entfernen, also passt es besser.