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("");

---

您的其他問題：

當我嘗試將文本放在圓圈中時，它沒有顯示

這是什么意思？ 您的路徑是一個圓，它行不通嗎？ 用代碼復制您的問題。

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

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

有沒有更復雜的方法來構建它？

是的，不，也許。 什么對您來說很復雜？ 這是有待商and的，不適用於stackoverflow。

如果您想添加代碼，請在這里運行 。

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);
});