javascript - 两个字符串中名称较长的条形图

Question

我之前创建了一个 question .这是 fiddle我所做的一切。由于某种原因， fiddle 会削减文本值。在我的应用程序中是这样的: 它也不是很好，因为名字太长了。我可以以某种方式将 xAxis 的文本值设置为两个字符串吗？我试着这样做:

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

但我很奇怪result .解决方案？

Answer 1

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

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

在这里查看:http://jsfiddle.net/95TuM/