添加路径，但路径上方还有文字 - D3js v3？

Question

尝试在此Zoomable Sunburst图表中添加文本数据：Zoomable Sunburst 我有这段代码：

editor<%>

但它不起作用。没有显示文字。我知道它是那样的，但我做错了。我目前正在使用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);
        });
});