条形图在两个字符串中具有较长的名称

Question

我之前创建过question。以下是我所做的fiddle。 由于某种原因，它在小提琴中削减了文本值。在我的应用程序中它是这样的： 它也不是很好，因为名字太长了。我能否以某种方式将xAxis的文本值设置为两个字符串。我试着这样做：

var xLPUAxis = d3.svg.axis()
    .scale(xLPU)
    .orient("bottom")
    .tickSize(30,40);

但我很奇怪result。 Sollutions？

Answer 1

为什么不使用css文本限制技术，例如text-overflow？这将使xAxis保持所需的大小，如果溢出则在末尾添加（...）。

.limit {
    width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

请在此处查看：http://jsfiddle.net/95TuM/

Answer 2

您应该查看以下jQuery插件：Trunk8 http://jrvis.com/trunk8/

您可以为标签容器设置固定宽度，然后添加以下代码：

$('.label').trunk8({
    lines: 1,
    fill: '…'
});