響應圖：獲取軸的寬度和高度，因此圖可以占用容器的剩余大小

Question

tl; dr，求解x軸和y軸尺寸。

容器尺寸：高度：500像素寬度：500像素

X軸尺寸： 高度：？ 寬度：

Y軸尺寸： 高度：？ 寬度：

圖形尺寸：高度：container.height-xAxis.height; 寬度：container.width-yAxis.width；

細節：

用戶上傳數據，我的應用程序創建了一個圖形。 圖形和軸應在500像素的正方形容器中很好地呈現。 這很容易，直到我們添加軸。 軸的寬度（y軸文本）或高度（x軸文本（垂直旋轉））不同。

我還沒有看到任何以容器大小開頭，減去軸大小然后在其余部分呈現圖形的示例。 （容器-軸=圖形尺寸）。 如何做到這一點？

問題是d3.svg.axis（）需要刻度。 此比例尺使用d3.scale.range（），它使用圖形的高度。 問題在於圖形高度為（容器高度-x軸高度）。 而且我們無法計算x軸，因為它取決於y軸的寬度！

我考慮了一種解決方案，即對所有可能構成刻度的文本取最大邊界框，然后加上軸線的高度或寬度。 顯然，在大型數據集中這可能是一個巨大的計算。 我可以做一些聰明的事情，例如找到最大值，並希望它是最長的像素。 但是，這一切似乎都很混亂，我敢肯定，任何創建動態圖的人都會遇到這個問題。

Answer 1

將d3圖適合特定像素：500 x 500

的HTML

<div id="chart"></div>

不留余量以獲取完整像素

JS

var  width = 500,
     height = 500;

var svg = d3.select("#chart").append("svg")
     .attr("width", width)
     .attr("height", height);

JSFiddle

圖片證明svg具有500 x 500的完整分辨率