使用JavaScript和D3調整可調整大小的SVG元素

Question

任何人都知道任何允許svg元素（也包括整個內容）的js代碼，具體取決於用戶設置的窗口大小。 我的用戶希望在活動桌面上的小型自定義視圖中查看d3圖形。 與此同時，其他人將在其活動桌面上全屏運行。 這意味着圖表需要根據用戶的偏好自行調整大小。

Answer 1

幾天前我把這個想要的行為的演示放在一起。 在這里查看 - http://bl.ocks.org/4444770

基本上，您可以監聽窗口的大小，對包含所有SVG元素的g元素應用比例變換，並調整父SVG的大小。 在pageload和window resize上調用此代碼，其中“container”是持有SVG的div：

d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")");
$("svg").height($("#container").width()*0.618);

如果您的SVG放在div中，這是一個很好的方法。

另一種方法是使用SVG viewBox，如Mike Bostock所示 - http://bl.ocks.org/harlantwood/raw/6900108/ 。 如果你將SVG附加到正文中，這種方法是最好的，而且我確定在將SVG放在div中時有一種方法可以使用這種方法，但是我無法找到解決方案，因此創建了上面的解決。

Answer 2

您可以在加載頁面或調整大小時調整svg.attr（“width”）。attr（“height”），但您需要在代碼中使用其他行為來使d3元素隨新大小而變化。

您還可以查看svg對象的.viewBox屬性，該屬性將動態擴展svg元素，但我發現它在不同瀏覽器中的行為是不穩定的：

http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute