D3 Donut Chart - 删除0%标签

时间:2016-03-18 16:06:50

标签: javascript d3.js

我很难在我的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
});

提前致谢。

1 个答案:

答案 0 :(得分:1)

在" text"的text()上执行此操作元素:

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

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