添加路径以及路径上方的文本 - D3js v3？

Question

尝试在这个 Zoomable 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);
        });
});

添加路径以及路径上方的文本 - D3js v3？

Add path but also text above the path - D3js v3?

javascript

svg

data-visualization

d3.js