SVG-Element - Handhabung und Auswahl von Text

Question

Probleme beim Lösen eines Problems in d3 - ich versuche, eine Legende an meine Svg anzuhängen, und der Text, den ich hineinlege, muss so getrennt werden, nur die d.key ist von der colorScale eingefärbt und das d.total ist unterhalb der d.key und die Füllung ist "schwarz".

hier ist der Code-Zeile bezieht Ich war gerade auf - .text(function(d) { return (d.key) + ' (' + d.total + ')'; })

kurz gesagt, wie kann ich eine weitere Zeile Text d.key hinzufügen und die Füllung dieses neuen Text „schwarz“ oder einfach nur nicht die colorScale wie d.key wird mit eingefärbt.

svg.append("g") 
 
     .attr("class", "legend") 
 
      .selectAll("text") 
 
      .data(layers) 
 
      .enter().append("text") 
 
       .text(function(d) { return (d.key) + ' (' + d.total + ')'; }) 
 
       .attr('fill', function(d) { return colorScale(d.key); }) 
 
       .attr('y', function(d, i) { return 50 * (i + 2.75); }) 
 
       .attr('x', "375");

Answer 1

Anzahl der Möglichkeiten, es zu tun. Zwei separate text Elemente in einem g gewickelt oder zeigen, was ich unten zwei tspan eingewickelt in ein einem text:

var svg = d3.select('body') 
 
    .append('svg') 
 
    .attr('width', 500) 
 
    .attr('height', 500); 
 

 
var layers = [ 
 
    { 
 
    key: 'one', 
 
    total: 10 
 
    }, { 
 
    key: 'two', 
 
    total: 20 
 
    } 
 
]; 
 

 
var colorScale = d3.scale.category10(); 
 

 
var text = svg.append("g") 
 
    .attr("class", "legend") 
 
    .selectAll("text") 
 
    .data(layers) 
 
    .enter().append("text") 
 
    .attr('y', function(d, i) { return 50 * (i + 2.75); }) 
 

 
text.append("tspan") 
 
    .text(function(d) { return (d.key) + ' (' + d.total + ')'; }) 
 
    .attr('fill', function(d) { return colorScale(d.key); }) 
 
    .attr('x', "375"); 
 

 
text.append("tspan") 
 
    .attr("dy", "1.2em") 
 
    .attr("x", "375") 
 
    .text("Second row of text") 
 
    .style("fill", "black");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>