d3.js Erstellen von Textbögen

Question

Ich versuche, eine Reihe von gekrümmten Textbögen zu erstellen. Wenn ich versuche und den Text in einen Kreis einfüge, wird er nicht angezeigt. Ich bin mir auch nicht sicher, wie ich die Ausrichtung des Textes steuern kann.

Gibt es eine anspruchsvolle Art und Weise dies zu bauen - auch den Originaltext verstecken müssen - nicht sicher, ob ich den Text setzen wollen innerhalb eines anderen Daten

<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

Der einzige Teil Ihrer Frage Attribut, das ist Antwort-fähig ist:

auch den ursprünglichen Text verstecken müssen

einfach ändern:

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

---

Weitere Fragen:

Wenn ich versuche, und und setzen Sie den Text im Kreis es nicht angezeigt

Was bedeutet das? Dein Weg ist ein Kreis und es wird nicht funktionieren? Replizieren Sie Ihr Problem mit Code.

Ich bin mir auch nicht sicher, wie man die Ausrichtung des Textes steuert.

Was bedeutet das? Start linksbündig? Recht? Vertikal?

Gibt es eine ausgeklügeltere Möglichkeit, dies zu bauen?

Ja, nein, vielleicht. Was ist für dich anspruchsvoll? Dies ist der Meinung und nicht für Stackoverflow geeignet.

Hier ist your code running, wenn Sie hinzufügen möchten.

Answer 2

Ich habe versucht, mich auf andere Aspekte der Website zu dieser Zeit zu konzentrieren. Ich habe es geschafft, die Probleme zu lösen.

---

„müssen auch den ursprünglichen Text verbergen“ ^ ich erwerben Sie den Text und dann leeren Sie einfach die div

„Wenn ich versuche, und und setzen Sie den Text im Kreis es nicht angezeigt“ ^ es wurde nicht korrekt übersetzt

"Ich bin mir auch unsicher, wie man die Ausrichtung des Textes steuert." ^ Ich habe mich gefragt, welcher Aspekt des Codes die Ausrichtung des Textes steuert, um zu vermeiden, dass er auf dem Kopf steht oder wenn er am inneren Rand oder außerhalb klebt.

"Gibt es eine ausgeklügeltere Möglichkeit, dies zu bauen?" ^ Ich denke, ich habe ein Problem mit der Art, wie Sie mit den Bögen und Textabschnitten zusammen verknüpfen müssen.

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