D3 圆环图 - 删除 0% 标签

D3 Donut Chart - Remove 0% label

本文关键字：标签 删除 圆环图 D3      更新时间：2023-09-26

我很难过滤掉 D3 圆环图之一上的 0% 标签。我试过使用 .filter。我不确定我做错了什么。我有一个数据集，可以创建 9 个圆环图（9 个大学团队在会议上的胜率）。其中一支球队没有赢得任何一场会议比赛，因此他们有 0%。

这是我的标签JS。我想显示除 0 以外的所有数据。

  var g = svg.selectAll("g")
  .data(function (d) { return pie(d.percent); })
  .enter().append("g");
  g.append("text")
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
  .attr("dy", ".35em")
  .attr("class", "arcLabel")
  .style("text-anchor", "middle")
  .text(function(d) { return d.data.percent.toFixed(1) + "%" ; });
将

过滤器放在正确的位置或调用数据时是否存在问题？以下是调用我的数据的行。

d3.csv("data.csv", function(error, data) {
if (error) throw error;

color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Team" && key !=="Record"; } ));
data.forEach(function(d) {
d.percent = color.domain().map(function(Team) {
  return {Team: Team, percent: +d[Team], };
});
});
//rest of the code for my charts here
});

提前谢谢。

在 "text" 元素的 text（） 上执行此操作：

  .text(function(d) { return d.data.percent == 0 ? "" : d.data.percent.toFixed(1) + "%" ; });

检查数据中是否有数字 0 或"0"作为字符串

相关文章：