d3.js: Как добавить значение под меткой в ​​диаграмме пончика

Question

Я новичок в d3.js, и то, что я достиг до сих пор, составляет this, используя учебные пособия и видео.

Теперь я пытаюсь добавить dataset.value под текстом этикетки, как показано на рисунке.

var dataset = [{ 
    label: 'On trip', 
    value: 35 
}, { 
    label: 'parked', 
    value: 65 
}]; 

Как это достичь?

Answer 1

Вы можете обновить добавить текст кода со следующим кодом.

text.enter() 
.append("text") 
.attr("dy", ".35em") 
.append('svg:tspan') 
.attr('x', 0) 
.attr('dy', 0) 
.text(function(d) { return d.data.label; }) 
.append('svg:tspan') 
.attr('x', 0) 
.attr('dy', 20) 
.text(function(d) { return d.data.value; }); 

Append два tspan к вашему text элементу

Обновлено Fiddle здесь

Answer 2

Вы должны сделать это так:

var text = svg.select(".labels").selectAll("text") 
     .data(pie(data), key); 
    //make a group 
    var textg = text.enter().append("g"); 
    //to the group append text for label 
    textg 
     .append("text") 
     .attr("dy", ".35em") 
     .text(function(d) { 
      return d.data.label; 
     }); 
    //to the group append text for value 
    textg.append("text") 
     .attr("dy", "1.95em") 
     .text(function(d) { return d.data.value; }); 

Рабочий код here