旭日圖智能文本換行

我有一個基於大D3可縮放旭日圖「咖啡輪」的例子：旭日圖智能文本換行

enter image description here

在該示例中存在，在一個搜索空間簡單的文本換行代碼標籤，並在第一個空格字符環繞文字：

var textEnter = text.enter().append("text") 
    .style("fill-opacity", 1) 
    .style("fill", function(d) { 
     return brightness(d3.rgb(colour(d))) < 125 ? "#eee" : "#000"; 
    }) 
    .attr("text-anchor", function(d) { 
     return x(d.x + d.dx/2) > Math.PI ? "end" : "start"; 
    }) 
    .attr("dy", ".2em") 
    .attr("transform", function(d) { 
     var multiline = (d.name || "").split(" ").length > 1, 
     angle = x(d.x + d.dx/2) * 180/Math.PI - 90, 
     rotate = angle + (multiline ? -.5 : 0); 
     return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + 
       ")rotate(" + (angle > 90 ? -180 : 0) + ")"; 
     }) 
    .on("click", click); 

textEnter.append("tspan") 
    .attr("x", 0) 
    .text(function(d) { 
     return d.depth ? d.name.split(" ")[0] : ""; 
    }); 

textEnter.append("tspan") 
    .attr("x", 0) 
    .attr("dy", "1em") 
    .text(function(d) { 
     return d.depth ? d.name.split(" ")[1] || "" : ""; 
    });

此代碼工作正常，但它是非常基本的，特別是如果整個標籤將在現有sunbust段已安裝在同一行（eiether因爲特定實驗室el太短，或者可用空間足夠大，因爲sunburst被放大）。在密集的sunbursts包裝標籤不必要地導致圖看起來凌亂/混亂。

我想使文字處理更加智能化，與可用空間比較標籤的長度（注意，取決於段可見的深度段改變「寬度」 zoom'ed時）。
此外，如果標籤的可用空間已知，則文本環繞可能更加智能化，例如，如果標籤包含兩個以上的單詞，則代碼可以決定是在第一個空間還是第二個空間打破。

如果有人已經解決了這個問題，並有一些例子，非常感謝，如果它可以共享。或者，如果有人對如何將標籤的長度與變化的可用空間進行比較有任何想法？

來源

2013-08-16 user2689682

我覺得你的問題是由兩個部分組成：

如何計算標籤的寬度是多少？
如何判斷寬度（sans split）是否超過切片寬度？

關於1，我通常使用下面的代碼片斷，我擡離我忘其中：

var getTextWidth = function(text) { 
    var canvas = document.createElement("canvas"); 
    var context = canvas.getContext("2d"); 
    var metrics = context.measureText(text); 
    return 1.6 * metrics.width; 
};

（注意1.6因數計算出的寬度乘以予補充說變形例中，因爲它似乎）

關於2.如果沒有完整的示例，有點難以分辨，但是從您發佈的內容來看，我想您需要將它與

y(d.dy)

它似乎有助於添加一個jsfiddle這樣的問題。

來源

2015-04-30 19:01:46

旭日圖智能文本換行

回答

相關問題