D3.js画布在Chrome中显示不正确

Question

我在下面创建了一个d3画布。

var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 1000)
            .append("g").attr("transform", "translate(150,150)");  

并进一步添加元素以创建情节。

我在谷歌Chrome浏览器中渲染时遇到问题。图表显示在左侧比预期更多，因此会被面板边框切断。

在Mozilla Firefox中正确呈现相同的代码。 在浏览器中计算画布坐标的方式有何不同？或者转换和翻译是否在Chrome中行为不端？

请提出解决方案。