这是一个JSFiddle：
http://jsfiddle.net/8p2yc/(从这里稍稍修改的例子：
http://bl.ocks.org/mbostock/3883245)
正如你可以在JSFiddle中看到的,沿着y轴的标签不符合svg.我知道我可以增加左边距,但事实是我不知道预先提供的数据.如果我只是使边框非常大,如果数字短,图表会看起来很尴尬.
创建图表时是否有预先计算最大标签宽度以便正确设置边距的方法？或者也许有一个完全不同的解决方案？
var margin = {top: 20,right: 20,bottom: 30,left: 50},width = 400 - margin.left - margin.right,height = 200 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
谢谢！
解决方法
您可以通过附加最大标签的文本进行测量,然后立即将其删除：
var maxLabel = d3.max(data,function(d) { return d.close; }),maxWidth;
svg.append("text").text(maxLabel)
.each(function() { maxWidth = this.getBBox().width; })
.remove();
然后可以使用该宽度来进行g元素的翻译：
svg.attr("transform","translate(" + Math.max(margin.left,maxWidth) + "," + margin.top + ")");
完成例here.
编辑：获取实际标签的最大长度有一点参与,因为您必须生成它们(使用正确的格式)并测量它们.这是一个更好的方式来做,虽然,因为你正在测量实际显示.代码相似：
var maxWidth = 0;
svg.selectAll("text.foo").data(y.ticks())
.enter().append("text").text(function(d) { return y.tickFormat()(d); })
.each(function(d) {
maxWidth = Math.max(this.getBBox().width + yAxis.tickSize() + yAxis.tickPadding(),maxWidth);
})
.remove();
