d3.js創建文本圓弧

Question

我正在嘗試創建一組曲線文本圓弧。當我嘗試並將文字放入圈中時，它不會顯示出來。我也不確定如何控制文本的方向。

是否有建立這個更復雜的方式 - 也需要隱藏原文 - 不知道如果我想將文本中的另一個數據屬性

<div data-type="curve">some text that needs</div> 

function curveme(el){ 

    var content = $(el).text(); 

    //Create the SVG 
    var svg = d3.select(el).append("svg") 
      .attr("width", 400) 
      .attr("height", 120); 


    //Create an SVG path    
    svg.append("path") 
     .attr("id", "wavy") //very important to give the path element a unique ID to reference later 
     .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30") //Notation for an SVG path, from bl.ocks.org/mbostock/2565344 
     .style("fill", "none") 
     .style("stroke", "#AAAAAA"); 


    /* 
    var pi = Math.PI; 

    var arc = d3.arc() 
      .innerRadius(150) 
      .outerRadius(180) 
      .startAngle(0) 
      .endAngle(pi/2) 

    svg.append("path") 
      .attr("d", arc) 
      .attr("id", "wavy") 
      .attr("transform", "translate(200,200)") 
      .style("fill","none") 
      .style("stroke", "#AAAAAA"); 
    */ 

    //Create an SVG text element and append a textPath element 
    svg.append("text") 
     .append("textPath") //append a textPath to the text element 
     .attr("xlink:href", "#wavy") //place the ID of the path here 
     .style("text-anchor","middle") //place the text halfway on the arc 
     .attr("startOffset", "50%")  
     .text(content); 
} 



$('[data-type="curve"]').each(function(index) { 
    curveme(this); 
}); 

Answer 1

你的問題的唯一部分是回答-能夠是：

還需要隱藏原文

只是更改爲：

function curveme(el) { 
    var obj = $(el); 
    var content = obj.text(); 
    obj.text(""); 

---

你的其他問題：

當我嘗試和並把文本中圈它不顯示

這是什麼意思？你的路徑是一個圓圈，它不會工作？用代碼複製你的問題。

我也不確定如何控制文本的方向。

這是什麼意思？開始對齊左邊？對？垂直？

有沒有更復雜的建築方式呢？

是的，不，也許。對你來說有多複雜？這是受意見，並不適合於計算器。

這裏的your code running如果你想添加到它。

Answer 2

我當時正試圖關注該網站的其他方面。我設法解決了這些問題。

---

「還需要隱藏原文」 ^我得到對應的文本，然後就清空DIV

「當我嘗試，把文字圈不露面」 ^它沒有正確翻譯

「我也不確定如何控制文本的方向。」 ^我想知道代碼的哪個方面控制文本的方向，以避免它出現顛倒或如果它堅持內部邊緣或外部。

「有沒有更復雜的建築方式？」 ^我想我有一個問題，你必須鏈接到弧和文本部分在一起。

function getRandomNumber(s, e){ 
    return Math.floor(Math.random() * e) + s; 
} 

function curveme(el,index){ 

    var content = $(el).text(); 
    $(el).empty(); 

    var markerPointerSize = $(el).parent().find('.markerpointer').width(); 

    var diameter = markerPointerSize+32; 

    //var diameter = 195;//large 
    //var diameter = 125;//small 
    radius = diameter/2; 

    //Create the SVG 
    var svg = d3.select(el).append("svg") 
      .attr("width", diameter) 
      .attr("height", diameter); 

    var pi = Math.PI; 

    var arc = d3.arc() 
      .innerRadius(radius-20) 
      .outerRadius(radius-15) 
      .startAngle(getRandomNumber(-1, 0.5)) 
      .endAngle(pi); 

    //Create an SVG path    
    svg.append("path") 
     .attr("id", "wavy"+index) //very important to give the path element a unique ID to reference later 
     .attr("d", arc) 
     .attr("transform", "translate("+radius+","+radius+")") 
     .style("fill", "none"); 

    //Create an SVG text element and append a textPath element 
    svg.append("text") 
     .append("textPath") //append a textPath to the text element 
     .attr("xlink:href", "#wavy"+index) //place the ID of the path here 
     .style("text-anchor","right") //place the text right on the arc 
     .attr("startOffset", "0")  
     .text(content); 
} 


$('[data-type="curve"]').each(function(index) { 
    curveme(this,index); 
});