如何在D3.js中添加HTML特殊字符？以度数符号°为例

问题原因 #

你用°这类HTML实体无效，是因为D3的.text()方法是设置SVG <text>元素的纯文本内容，不会解析HTML实体。SVG文本元素不支持HTML语法，所以HTML实体在这里无法被识别渲染。

可行解决方案 #

以下两种方法都能正常显示度数符号：

1. 直接使用度数符号字符
   JavaScript字符串原生支持Unicode字符，可直接在模板字符串里写入°：

.text(`${degree}°`);

2. 使用Unicode转义序列
   如果担心字符编码问题，也可以用度数符号对应的Unicode转义码\u00B0：

.text(`${degree}\u00B0`);

注意事项 #

不要尝试用.html()方法，因为SVG的<text>元素不支持嵌入HTML内容，.html()方法仅适用于HTML元素（比如<div>、<span>），对SVG文本元素无效。

内容的提问来源于stack exchange，提问作者MR.Jeon