帶兩個字符串中較長名稱的條形圖

我以前創建了一個question。這是我所做的fiddle。由於某種原因，在小提琴中它削減了文本值。在我的應用程序中，它是這樣的： enter image description here 這不是很好，因爲名稱太長。我可以使xAxis的文本值以某種方式處於兩個字符串中。我試圖這樣做：帶兩個字符串中較長名稱的條形圖

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

但我奇怪result。 Sollutions？

來源

2014-07-01 Sergey Scopin

爲什麼不使用css文本限制技術，如text-overflow？這將使xAxis保持所需的大小，如果溢出則添加（...）到最後。

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

見這裏：http://jsfiddle.net/95TuM/

來源

2014-07-01 12:52:46 LcSalazar

好吧，沒關係，但是如何在這種情況下查看整個文本？ –

如果你想在兩行中顯示它，刪除'overflow'，'text-overflow'和'white-space'屬性，但是保持'width'的大小限制文本...看到更新：http：// jsfiddle.net/95TuM/1/ – LcSalazar

太棒了！工作正常。 –

你應該看看下面的jQuery插件：Trunk8 http://jrvis.com/trunk8/

您可以設置一個固定的寬度與標籤的容器，你會添加以下代碼：

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

來源

2014-07-01 14:24:21

我找到了這個解決方案：http://bl.ocks.org/mbostock/7555321 –

帶兩個字符串中較長名稱的條形圖

回答

相關問題