XAxis標籤問題

我問你如何用xAxis標籤解決問題，當數據量很大（重疊圖層），並且你指示我插入一個新行（*）時，雖然我在我的slipt函數中有一個問題。

有人對此問題進行了深入研究。

How do I include newlines in labels in D3 charts?

我的圖表： http://jsfiddle.net/superboggly/tL2hW/

解決方案：

var insertLinebreaks = function (d) { 
    var el = d3.select(this); 
    var words = d.split(' '); 
    el.text(''); 

    for (var i = 0; i < words.length; i++) { 
    var tspan = el.append('tspan').text(words[i]); 
    if (i > 0) 
     tspan.attr('x', 0).attr('dy', '15'); 
    } 
}; 

svg.selectAll('g.x.axis g text').each(insertLinebreaks);

來源

2014-01-21 user2920033

我會建議使用此解決方案： http://www.d3noob.org/2013/01/how-to-rotate-text-labels-for-x-axis-of.html

旋轉x軸的標籤，直到出現過多的小節。如果酒吧的數量太高，我會建議重新考慮表格，因爲任何人都不容易看到。如果你有谷歌的信息可視化，這裏有指導。

要具有用於旋轉爲水平軸的單位一般標籤，具體的文本元素XX度使用

.attr("transform", "rotate(-XX)")

。

來源

2014-01-21 12:24:35 dansv130

感謝這個解決方案完全符合我的問題。我只有一個疑問，我怎麼能用這個技巧插入xAxis名字。（「文本」） .attr（「x」，width） .attr（「dy」，30） .attr（「text-anchor」，「end」）使用正常的xAxis我使用：。） .text（「Generation」）; 但與totable lablesit不起作用。 – user2920033

您可以使用.attr（「transform」，「rotate（-XX）」）旋轉每個文本元素XX度。所以做你做的事，並添加變換旋轉，你應該全部設置！ – dansv130

回答

相關問題