Question

我正在使用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。

Answer 1

有两种解决方案可行（因为HTML显然没有）：

在Javascript中对delta进行编码，如下所示：

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

这非常可靠，但不太可读。

对文件本身中的delta进行编码：

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

这取决于文件编码的正确处理（在源代码管理中，在部署中，在Web服务器中），因此它可读但很脆弱。

妥协可能是

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

Answer 2

为什么不使用unicode？

UTF8或UTF16

并将Δ编码为unicode 0394 hex
如果你没有能够做到这一点的工具，
可以使用十六进制编辑器

可以使用INCSKAPE

这是我在谷歌Greek Alphabet in Inkscape
找到的第一个有效链接

<强> [EDIT2]

<?xml version="1.0" encoding="UTF-16"?> <svg width="512" height="512" viewBox="0 0 512 512" fill="none" stroke="none" stroke-width="1px" transform="matrix(1,0,0,1,0,0" > <text x="5" y="20" font-family="Verdana" font-size="16" fill="blue"> Greek alphabet test <tspan x="5" dy="+20"> ΑΒΓΔ </tspan> </text> </svg>

在UTF-8中，ΑΒΓΔ在十六进制视图中编码为CE,91,CE,92,CE,93,CE,94

在UTF-16中，ΑΒΓΔ在十六进制视图中编码为91,03,92,03,93,03,94,03

不要忘记在UTF-16中每个字符都是16位（2字节）!!!

在UTF-8中除希腊字母外都是1字节/字符

和希腊字符本身是2 Bytes / char

Answer 3

这有效：

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

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

3 个答案: