對齊圓弧內的文本d3js

我正在嘗試繪製帶有同心圓的圖表，其中半徑將定義各個點之間的距離。我希望特定距離的所有點的標籤出現在相應的外殼內。我使用d3繪製圖形。除了無法確定如何確保文本很好地呈現並且與具有恆定字符寬度和字符間距的基線對齊之外，我已經掌握了一切。我花了整整一天的時間試圖弄明白，任何幫助將不勝感激。對齊圓弧內的文本d3js

這裏的JSFiddle

這裏是javascript代碼

var dataset = [{label:"Hello1", value:5},{label:"Hello2", value:10 {label:"Hello3",value:15},{label:"Hello4", value:20},{label:"Hello5", value:25}]; 

var arc = d3.svg.arc() 
    .innerRadius(function(d,i){return i*35;}) 
    .outerRadius(function(d,i){return (i*35+30);}) 
    .startAngle(0) 
    .endAngle(2 * Math.PI); 

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500) 
    .selectAll("g") 
    .data(dataset) 
    .enter() 
    .append("g") 
    .attr("transform", "translate(480,250)"); 

var arcs = svg.append("path") 
    .attr("fill","red") 
    .attr("id", function(d,i){return "s"+i;}) 
    .attr("d",arc); 

var thing = svg.append("g") 
    .attr("id","thing") 
    .style("fill","navy"); 

thing.append("text") 
    .style("font-size",20) 
    .attr("dy",function(d,i){return 20;}) 
    //.attr("alignment-baseline","middle") 
    .append("textPath") 
    .attr("textLength",function(d,i){return 90-i*5 ;}) 
    .attr("xlink:href",function(d,i){return "#s"+i;}) 
    .attr("startOffset",function(d,i){return 3/20;}) 
    .text(function(d){return d.label;})

來源

2012-11-02 Prasanjit Prakash

你的意思是這樣的：

http://jsfiddle.net/wcWUE/

我所改變的是：

thing.append("text") 
    .style("font-size",20) 
    .append("textPath") 
    .attr("textLength",function(d,i){return 90-i*5 ;}) 
    .attr("xlink:href",function(d,i){return "#s"+i;}) 
    .attr("startOffset",function(d,i){return 3/20;}) 
    .attr("dy","-1em") 
    .text(function(d){return d.label;})

此外，我顛倒了環的順序，使閉塞不成問題。

我想你可以製作一個單獨的路徑集合，可能只是在一個段落中定義來繪製文本。

但我不確定這個結果是你要找的嗎？

來源

2012-11-07 23:06:39 Superboggly

對齊圓弧內的文本d3js

回答

相關問題