d3.js爲Y軸打包長標籤

參考Mike Bostock的this示例，我想將相同的想法應用到切換X和Y的條形圖中。所以標籤沿Y軸向上和向下運行。d3.js爲Y軸打包長標籤

在這個小提琴中：http://jsfiddle.net/2eLW6/我只是從Mike的例子中複製wrap函數並將其應用到我的圖表。

function wrap(text, width) { 
text.each(function() { 
    var text = d3.select(this), 
     words = text.text().split(/\s+/).reverse(), 
     word, 
     line = [], 
     lineNumber = 0, 
     lineHeight = 1.1, // ems 
     y = text.attr("y"), 
     dy = parseFloat(text.attr("dy")), 
     tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); 
    while (word = words.pop()) { 
     line.push(word); 
     tspan.text(line.join(" ")); 
     if (tspan.node().getComputedTextLength() > width) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
     } 
    } 
    }); 
}

在Mike的例子中，如果將某個行長超過某個行的話，這些字只會放在新行上。在我的小提琴中，它把每一個單詞放在一個新的線上。另外，我想知道是否有辦法將y屬性稍微移動一下，如果創建了新行以便它仍然居中？

任何人都可以幫我翻譯y軸的wrap（）函數嗎？

wrap（）函數在第203行定義，並從該小提琴的第135行調用。

來源

2014-01-14 rowyourboat

你見過[這個問題]（http://stackoverflow.com/questions/16039693/how-to-do-wordwrap-for-chart-labels-using-d3-js）？ –

爲了將來的參考，這種類型的功能可能存在於未來的D3 [GitHub D3文本包裝程序]（https://github.com/mbostock/d3/issues/1642） –

-1

我一直在尋找解決這個問題的辦法，並發現Mike Bostock's已經發布了working example。該示例顯示可用於x軸，但可以輕鬆適用於y軸。 wrap()函數不需要修改，而必須將其應用於y軸，以指示可能適用的正確寬度變量。

在最初的例子中，垂直圖表，wrap()被稱爲如下：

svg.append（「G」） .attr（「類」，「x軸」） .attr（（），「transform」，「translate（0，」+ height +「）」） .call（xAxis） .selectAll（「。tick text」） .call（wrap，x.rangeBand（））;

水平圖表可能會有所不同，但典型的變量保持的寬度的值的具體細節被margin.left，如在下面的代碼片斷：

svg.append（「G」 .attr（「class」，「y axis」）。

在OP中要求的其餘功能將需要修改wrap()。

來源

2014-05-12 14:37:52 emiguevara

我不能真正讓你的jsfiddle工作，事情似乎被推到左邊，但無論如何，我認爲我確定了你的問題。

關於你的第一個問題，爲什麼每個單詞都被推到自己的路線。我相信這是因爲你發送的寬度決定了什麼時候休息是很小的。在你的jsfiddle，您的通話包是：

.call(wrap, yScale.rangeBand());

yScale.rangeBand()是一個非常小的值，在我的分辨率爲36個像素。這意味着一旦你的標籤超過36像素，它會放入一個換行符（添加一個tspan）。您不希望使用rangeBand，而是希望將此數字作爲圖表的左邊距（您的y軸左側有多少空間）。

最後，就垂直居中而言，您需要確定您的標籤分爲多少行，以便知道每個行的移動量。要做到這一點，在總結的最後，你可以添加以下兩行：

var breaks = text.selectAll("tspan")[0].length; text.selectAll("tspan").attr("y", -9 * (breaks-1));

的第一段代碼得到你的標籤被分成的行數。第二，選擇你的標籤的所有tspans，並相應地移動它們來居中。我只使用默認的字體大小。計算該數字以處理多種字體大小可能有更好的方法。

來源

2015-11-20 15:14:15 Hotamd6

d3.js爲Y軸打包長標籤

回答

相關問題