Label 餅圖文字未出現

Question

無論我嘗試什么（重置半徑、更改文本顏色），我的餅圖上的標簽都不可見。 餅圖本身是可見的。 我看過很多例子，例如https://bl.ocks.org/santi698/f3685ca8a1a7f5be1967f39f367437c0 ，但無濟於事。 一定有一些簡單的東西我錯過了，可能在質心 function 中。 任何幫助，將不勝感激。 代碼如下，它是一個神社模板的一部分。 但我想這不相關。 顯然 arcs.append("text") 語句是某處有錯誤的語句。

<svg width="960" height="500">
</svg>
<script>
    var svg = d3.select("svg");

    var margin = 50,
        width = +svg.attr("width") - margin,
        height = +svg.attr("height") - margin,
        radius = height / 2;

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

    data = [{fruit: "apple", amount: 3},
            {fruit: "pear", amount: 2},
            {fruit: "kiwi", amount: 5}];
    console.log(data);

    var colors = ['green', 'red', 'blue'];

    var arc = d3.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

    var labelArc = d3.arc()
        .outerRadius(radius - 40)
        .innerRadius(radius - 40);

    var pie = d3.pie()
        .value(function(d) { return d.amount; });
    console.log(pie(data))

    var arcs = g.selectAll("arc")
        .data(pie(data))
        .enter()
        .append("g")
            .attr("class", "arc");

    arcs.append("path")
        .attr("d", arc)
        .style('fill', function(d, i) {
            return colors[i];
        });

    arcs.append("text")
        .attr("transform", function(d) {
            return "translate(" + labelArc.centroid(d) + ")";
        })
        .text(function(d) {
            return d.fruit;
        });
</script>

Answer 1

D3餅圖生成器返回具有多個已創建屬性的對象數組，其中包括：

data - 輸入數據； 輸入數據數組中的相應元素。

因此，它應該是：

.text(function(d) {
    return d.data.fruit;
});

這是您進行更改的代碼：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <svg width="960" height="500"> </svg> <script> var svg = d3.select("svg"); var margin = 50, width = +svg.attr("width") - margin, height = +svg.attr("height") - margin, radius = height / 2; var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); data = [{ fruit: "apple", amount: 3 }, { fruit: "pear", amount: 2 }, { fruit: "kiwi", amount: 5 } ]; var colors = ['green', 'red', 'blue']; var arc = d3.arc().outerRadius(radius - 10).innerRadius(0); var labelArc = d3.arc().outerRadius(radius - 40).innerRadius(radius - 40); var pie = d3.pie().value(function(d) { return d.amount; }); var arcs = g.selectAll("arc").data(pie(data)).enter().append("g").attr("class", "arc"); arcs.append("path").attr("d", arc).style('fill', function(d, i) { return colors[i]; }); arcs.append("text").attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }).text(function(d) { return d.data.fruit; }); </script>