使用D3JS轴+视图框时，如何适当缩放轴？

Question

我正在尝试使用d3js绘制图形。我想使所有内容保持比例，因此我一直在svg元素上使用'viewBox'属性，如下所示：

svg.attr("viewBox", "-5 -5 10 10")

在我尝试添加轴之前，一切工作都很好。当我添加一个轴时，比例尺完全被弄乱了，看起来不对。我将其简化为jsfiddle：

http://jsfiddle.net/gq6tykwL/5/

该轴仅显示为一个巨大的黑条，如果您检查这些html元素，您会发现它们是巨大的刻度线。

如果我更改视图框以反映svg的宽度/高度，如下所示：

svg.attr("viewBox", "0 0 500 500")

然后，轴将按我期望的方式显示，但是我的图形将不再以适当的比例绘制。 Jsfiddle在这里：

http://jsfiddle.net/rdua3ncp/

有人可以解释我在做什么错吗？还是我应该采取另一种方法？