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

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 + "%Δ" // Displays the string literal Δ
return Math.round(delta * 10) / 10 + "%Δ;" // Displays the string literal Δ

不太确定如何进行。如果重要，字体是无衬线的

我对 SVG 文本不是很熟悉，但我想做的只是写希腊字母增量。

Answer 1

有两种解决方案可以工作（因为HTML显然不起作用）：

• 在 Javascript 中对增量进行编码，如下所示：

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

这是非常可靠的，但不是很好读。

• 对文件本身中的增量进行编码：

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

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

折衷可能是

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

Answer 2

1. 为什么不使用Unicode？

   • UTF8 或 UTF16
   • 并将Δ编码为 Unicode 0394 十六进制
   • 如果您没有能够做到这一点的工具，可以使用十六进制编辑器

2. 可以使用INCSKAPE

   • 这是我在Inkscape中通过谷歌希腊字母找到的第一个有效链接

[编辑2]

<?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 字节/字符

Answer 3

这奏效了：

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