javascript - 如何在D3 svg.text对象中显示希腊字母？

我正在使用D3，并且要添加希腊字母delta。

这是在我的HTML标签中:

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

这是问题所在:
“bars”是一个变量，用于存储对“.bar”类的选择并将“g”附加到它们之后。

var text = bars.append('text')
            .attr('class', 'delta')
            .text(function(d) {
                // Rounding to one decimal place
                var delta = Math.abs(d.benchmark - d.completes);
                return Math.round(delta * 10) / 10 + "%";
            })
            .attr('x', 0)
            .attr('dy', '-0.25em')
            .attr('style', 'text-anchor: left; vertical-align: center')
            ;

在这一行中，我遇到了问题:

return Math.round(delta * 10) / 10 + "%";

我尝试过的事情:

return Math.round(delta * 10) / 10 + "%Δ"; //Displays ? instead of Δ
return Math.round(delta * 10) / 10 + "%&Delta;" // Displays the string literal &Delta;
return Math.round(delta * 10) / 10 + "%&#916;;" // Displays the string literal &#916;

不太确定如何进行。如果重要的话，字体为sans-serif

我对SVG文字不是很熟悉，但是我要做的就是写希腊字母delta。

最佳答案

有两种解决方案可以使用(因为HTML显然无效):

用Java编码增量，像这样:

return Math.round(delta * 10) / 10 + "% \u0394";
这是非常可靠的，但不是很可读。

在文件本身中编码增量:

return Math.round(delta * 10) / 10 + "% Δ";
这取决于始终对文件编码进行正确的处理(在源代码管理中，在部署中，在Web服务器中)，因此它可读但易碎。

妥协可能是

const DeltaLetter = '\u0394';
...
return Math.round(delta * 10) / 10 + "% " + DeltaLetter;

关于javascript - 如何在D3 svg.text对象中显示希腊字母？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30918523/