Question

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

容器尺寸：高度：500px 宽度：500px

X轴尺寸： 高度：？宽度：？

Y轴尺寸： 高度：？ 宽度：？

图形尺寸：高度：container.height - xAxis.height; 宽度：container.width - yAxis.width;

详细信息：

用户上传数据，我的应用程序会创建图表。图形和轴应该在500px方形容器中很好地呈现。这很容易，直到我们添加轴。轴的宽度（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);

图片证明svg提供完整的500 x 500分辨率

500x500