Wie man Text an SVG anfügt

Question

Ich versuche, Text an die SVG per unten Code für das ich den folgenden Code anhängen, aber es funktioniert nicht.

var svg = d3.select("#chart"); 

     xScale.domain(data.map(function(d){return d.key;})) 
     yScale.domain([0,d3.max(data,function(d){return d.doc_count;})]) 

     svg.append("g") 
      .attr("class","axis") 
      .attr("transform","translate("+margin.left+","+height+")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class","axis") 
      .attr("transform","translate("+margin.left+",0)") 
      .call(yAxis); 

     svg.attr("width",width + margin.left + margin.right) 
      .attr("height",height + margin.top + margin.bottom) 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     svg.selectAll("rect") 
      .data(data) 
      .enter() 
      .append("rect") 
      .attr("x",function(d){return margin.left + xScale(d.key)}) 
      .attr("y",function(d){return yScale(d.doc_count)}) 
      .attr("width", xScale.rangeBand()) 
      .attr("height", function(d) { return height - yScale(d.doc_count); }) 
      .attr("fill","teal"); 

     svg.selectAll("text") 
      .data(data) 
      .enter() 
      .append("text") 
      .text(function(d){return d.doc_count;}) 

Am Ende, wenn ich das Dom sehe, gibt es keine Textelement-Tags.

Answer 1

Sie rufen Anruf (xAchse) und Call (yAchse), die <text> Elemente so erstellen, wenn Sie d3.selectAll sagen ("text") wählt diese Elemente durch Aufruf erstellt (xAchse) und Call (yAchse).

Nehmen Sie an, Ihre Daten zählen ist 5 dann hat es bereits 5 <text> Elemente und es wird kein neues anhängen.

aktualisieren Sie Ihren Code

 svg.append("g") 
      .attr("class","axis") 
      .attr("transform","translate("+margin.left+","+height+")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class","axis") 
      .attr("transform","translate("+margin.left+",0)") 
      .call(yAxis); 

nach unten Code

svg.selectAll("text") 
     .data(data) 
     .enter() 
     .append("text") 
     .text(function(d){return d.doc_count;}) 

Answer 2

Das Problem in Ihrem Code ist der gleiche wie Soham in seiner Antwort erwähnt. Wenn Sie den Elementselektor text verwenden, werden alle Elemente in Ihrem SVG einschließlich der Achentexte zurückgegeben, die beim Erstellen von Achsen automatisch von d3 erstellt wurden.

Die bestmögliche Auswahl wäre also, einen anderen Selektor für die zusätzlichen Textbeschriftungen zu verwenden.

svg.selectAll("text.label") //Or simply (".label") 
    .data(data) 
    .enter() 
    .append("text") 
    .attr("class","label") 
    .text(function(d){return d.doc_count;}) 

Sie müssen in diesem Fall auch die Textpositionsattribute angeben.

Wenn Sie Textelemente relativ zu den Rect-Elementen positionieren möchten, können Sie Gruppenelemente zum Gruppieren von Rect- und Textelementen erstellen und das Positionsattribut (Transformation) von Gruppenelementen festlegen.