Добавить путь, но также текст над дорогой - D3js v3?

Question

Попытка добавить текстовые данные выше пути в этом Масштабируемые Sunburst графике: Zoomable Sunburst У меня есть этот код:

d3.json(jsonUrl, function(error, data) { 
    if (error) { 
     throw error; 
    } 

    svg.selectAll("g") 
     .data(partition.nodes(data)) 
     .enter() 
     .append("g") 
     .append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { 
      return color((d.children ? d : d.parent).name); 
     }) 
     .on("click", self.click) 
     .append("text") 
     .text(function(d) { 
      //console.dir(d); 
      return d.name + "\n" + formatNumber(d.value); 
     }); 
    }); 

Но это не работает. Текст не отображается. Я знаю, что это нечто подобное, но я делаю что-то неправильно. Я использую D3js версии 3 на данный момент.

Некоторые идеи?

Answer 1

Я только что нашел этот пример Donut Chart и изменил некоторые части в моем коде. Хотя он выглядит загроможденным, он выполняет свою работу. Может быть, с некоторыми полирующими я мог бы получить достойную внешность:

Вот мой код:

var svg = d3.select("body") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"), 
g = null; 

d3.json(dataFile, function(error, data) { 
    if (error) { 
     throw error; 
    } 

    g = svg.selectAll(".arc") 
     .data(partition.nodes(data)) 
     .enter() 
     .append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { 
      return color((d.children ? d : d.parent).name); 
     }) 
     .on("click", self.click); 

    g.append("text") 
     .attr("transform", function (d) { 
      return "translate(" + arc.centroid(d) + ")"; 
     }) 
     .attr("dy", ".35em") 
     .text(function (d) { 
      return d.name + "\n" + formatNumber(d.value); 
     }); 
});