Элемент SVG - обработка и выбор текста

Question

проблема с решением проблемы в d3 - я пытаюсь добавить легенду к моему svg, а текст, который я вставляю в него, нужно отделить, так что только d.key окрашен в colorScale, а d.total находится под d.key, а заливка - «черная».

вот строка кода я только со ссылкой на - .text(function(d) { return (d.key) + ' (' + d.total + ')'; })

короче, как я могу добавить еще одну строку текста ниже d.key и сделать заливку этого нового текста «черный» или просто не colorScale, как d.key, окрашен.

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

Количество способов сделать это. Два отдельных text элементов, завернутые в g или что я покажу ниже два tspan завернутые в виде 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>