如何在D3.js中为所有数值添加百分号（%）？

嘿，我看你在给D3.js环形柱状图的数值添加百分号时遇到了问题——直接在数值后加%没生效对吧？其实问题出在你生成数值文本的代码逻辑里，咱们来快速解决它：

关键修改点 #

你代码里负责渲染数值文本的部分是这段：

valueText.selectAll("tspan").data(data).enter()
.append("tspan")
.attr({
  x:50,
  y:function(d,i){return i*14},
  "text-anchor":"end"
})
.text(function(d,i){return data[i].value});

这里的data[i].value是数值类型，直接写data[i].value%会触发语法错误（这是JavaScript的取余运算符语法），如果是数据里把value改成带%的字符串，又会破坏后续依赖数值计算的弧形动画逻辑，所以正确的做法是在渲染文本时把数值转成带百分号的字符串。

修改方案 #

把text回调函数的返回值改成数值转字符串后拼接百分号即可，有两种常用写法：

1. ES6模板字符串（更简洁）：

.text(function(d,i){return `${data[i].value}%`});

2. 传统字符串拼接：

.text(function(d,i){return data[i].value + "%"});

如果你的数值需要格式化（比如保留固定小数位数），可以搭配d3.format处理，比如要保留1位小数：

.text(function(d,i){return d3.format(".1f")(data[i].value) + "%"});

修改后的完整代码片段 #

这里是修改后的数值文本渲染部分：

valueText.selectAll("tspan").data(data).enter()
.append("tspan")
.attr({
  x:50,
  y:function(d,i){return i*14},
  "text-anchor":"end"
})
.text(function(d,i){return `${data[i].value}%`}); // 这里是修改的核心

替换原代码里对应的部分后，图表里的所有数值就会自动带上百分号了。

内容的提问来源于stack exchange，提问作者leonardocallie