未捕获的类型错误：d3.arc(...).outerRadius(...).innerRadius(...).text 不是函数

Question

我在“卡片”引导程序上对图表进行编码时遇到错误。 问题是我只希望标签显示在我的饼图上，但问题是谷歌浏览器上的控制台显示“未捕获的 TypeError：d3.arc(...).outerRadius(...).innerRadius(...)。文本不是函数” 我不明白为什么。

下面是我的饼图代码：

var data = [
    {"platform": "Android", "percentage": 40.11},
    {"platform": "Windows", "percentage": 36.69},
    {"platform": "iOS", "percentage": 13.06}
];


var svgCirWidth = 600, svgCirHeight = 300, radius = Math.min(svgCirWidth, svgCirHeight) / 2;

const pieContainer = d3.select("#pieChart")
.append("svg")
.attr("width", svgCirWidth)
.attr("height", svgCirHeight);

//create group element to hold pie chart

var g = pieContainer.append("g")
.attr("transform", "translate(" + 170 + "," + radius + ")");

var color = d3.scaleOrdinal(d3.schemeCategory10);

var pie = d3.pie().value(function(d){
    return d.percentage;
});

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

var arc = g.selectAll("arc")
.data(pie(data))
.enter() //means keeps looping in the data
.append("g");

arc.append("path")
.attr("d", path)
.attr("fill", function(d){
    return color(d.data.percentage);
})

var label = d3.arc()
.outerRadius(radius)
.innerRadius(0)
.text(function(d){
    return d;
});

Answer 1

d3.arc 返回路径的d 属性。这不能包含文本。

在 SVG 中，文本必须包含在 <text> 中。

由于您的变量 arc 是 g 元素的选择，您可以将 <text> 附加到它：

arc.append('text')
     .text(/* ... */)

在收到“它仍然无法工作”的评论后进行编辑

请在报告问题时具体说明，以便获得适当的帮助：是否有任何错误消息？观察到的行为是什么，预期的行为是什么？

使用arc.append('text') 似乎工作得很好。

调试提示

使用console.log 通常会有所帮助，如下所示：

arc.append('text')
  .text(function(d){
    console.log('text', d)
    return d;
  })

上面的代码将显示d 是一个对象，这就是标签在页面中显示为[object object] 的原因。

我假设所需的行为是显示平台和百分比值。

那么，由于 console.log 输出，我们知道我们应该使用 d.data.platform 和 d.data.percentage，而不是 return d：

return d.data.platform + ': ' + d.data.percentage;

标签放置

观察到的另一个问题是所有标签都重叠。这是正常的，没有为他们定义位置。

快速使用搜索引擎向我们展示了this example，其中arc.centroid 与text-anchor: middle 一起使用以将每个标签定位在合适的位置。

解决方案如下图所示。

var data = [
    {"platform": "Android", "percentage": 40.11},
    {"platform": "Windows", "percentage": 36.69},
    {"platform": "iOS", "percentage": 13.06}
];


var svgCirWidth = 600, svgCirHeight = 300, radius = Math.min(svgCirWidth, svgCirHeight) / 2;

const pieContainer = d3.select("#pieChart")
.append("svg")
.attr("width", svgCirWidth)
.attr("height", svgCirHeight);

//create group element to hold pie chart

var g = pieContainer.append("g")
.attr("transform", "translate(" + 170 + "," + radius + ")");

var color = d3.scaleOrdinal(d3.schemeCategory10);

var pie = d3.pie().value(function(d){
    return d.percentage;
});

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

var arc = g.selectAll("arc")
.data(pie(data))
.enter() //means keeps looping in the data
.append("g")

arc.append("path")
.attr("d", path)
.attr("fill", function(d){
    return color(d.data.percentage);
})

arc.append('text')
  .text(function(d){
    return d.data.platform + ': ' + d.data.percentage;
  })
  .attr('transform', function(d){
    return 'translate(' + path.centroid(d) + ')'
  })
  .attr('text-anchor', 'middle')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
<div id="pieChart"></div>