Jak dopasować szerokość tekstu do rozmiaru koła w pakiecie z okręgiem D3

Question

Za pomocą D3 wyświetlam kilka okręgów w różnych rozmiarach, z których każdy jest wypełniony tekstem. Utknąłem w znalezieniu prawidłowego rozmiaru czcionki, aby tekst pasował do kręgu, w zależności od rozmiaru i długości tekstu. Długi tekst powinien zostać podzielony na więcej linii. Tu jest mój kodu:

var data = { 
    "name": "", 
    "children": [ 
     { "name": "This is a tag", "value": 242 }, 
     { "name": "Circle", "value": 162 }, 
     { "name": "Tree", "value": 80 }, 
     { "name": "My sentence is very long and needs breaks", "value": 80 }, 
    ] 
} 

var diameter = 300, 
    format = d3.format(",d"); 

var bubble = d3.layout.pack() 
    .sort(null) 
    .size([diameter, diameter]) 
    .padding(1.5); 

var svg = d3.select("body").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .attr("class", "bubble"); 

d3.json(data, function(error, root) { 
    var node = svg.selectAll(".node") 
     .data(bubble.nodes(data) 
     .filter(function(d) { return !d.children; })) 
    .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .style("fill", function(d) { return '#f88' }); 

    // text part 
    node.append("text") 
     .attr("dy", ".3em") 
     .style("text-anchor", "middle") 
     .style("font-size", function(d) { return Math.round(d.r/3)+'px'; }) 
     .text(function(d) { return d.name.substring(0, d.r/3); }); 
}); 

d3.select(self.frameElement).style("height", diameter + "px"); 

Stworzyłem skrzypcach oraz na http://jsfiddle.net/L4nMx/ Chyba powinienem obliczyć szerokość tekstu i zmienić rozmiar czcionki, dopóki nie pasuje do rozmiaru kręgu lub coś podobnego. Czy istnieje funkcja "strech", aby zrobić to w łatwy sposób?

Answer 1

To rozwiązanie jest w porządku dla mnie na teraz. To nie jest dokładne matematyki, ale i tak pasuje.

Zobacz go w akcji na http://jsfiddle.net/L4nMx/3/

.style("font-size", function(d) { 
     var len = d.name.substring(0, d.r/3).length; 
     var size = d.r/3; 
     size *= 10/len; 
     size += 1; 
     return Math.round(size)+'px'; 
    }) 
    .text(function(d) { 
     var text = d.name.substring(0, d.r/3); 
     return text; 
    }); 

Następnym krokiem byłoby złamać długi tekst w wielu wierszach więc można powiększyć rozmiary czcionek w takich przypadkach, ale nie udało mi się rozwiązać ten problem. W SVG nie jest to łatwe, ponieważ proste podziały linii nie są możliwe. Może rozwiązania zawijania z komentarzy w pytaniu można dodawać tutaj - jakoś ...

Answer 2

Jest to bl.ocks https://bl.ocks.org/mbostock/1846692

, która jest w zasadzie

node.append("circle") 
     .attr("r", function(d) { return d.r; }); 

    node.append("text") 
     .text(function(d) { return d.name; }) 
     .style("font-size", function(d) { return Math.min(2 * d.r, (2 * d.r - 8)/this.getComputedTextLength() * 24) + "px"; }) 
     .attr("dy", ".35em");