D3.js D3百分比上标

我想在上标上一个百分号

我找到了一个很好的例子，但不是百分数

var svgText = svg.append('text').text('This is a test : mm²')

有没有一种方法可以让我用百分比做同样的事情

.text(function (d) {return d.site + 'mm²';});

---

要使75%上标

为什么不使用

tspan

？这将允许您以想要的方式格式化任何文本（上标或其他），无论是否有unicode上标符号，您都可以使用：

在元素中，文本和字体属性以及当前文本 可使用绝对或相对坐标值调整位置 通过包含一个元素。（）

在这方面，您可以采取一些方法，但是如果您可以提取需要上标的文本（或动态生成），那么您可以相对轻松地创建上标文本和常规文本。下面我使用一个

tspan

来保存常规文本，另一个用来保存上标：

var svg=d3.select（“body”）.append（“svg”）；
风险值数据=[
{text:“这是一些普通文本”，super:“这是上标”}，
{文本：“一些文本”，超级：“α，β，γ，%，！，1,2,3”}
];
var text=svg.selectAll（）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“x”，10）
.attr（“y”，函数（d，i）{返回i*20+20；}）；
//主要内容：
text.append（“tspan”）
.text（函数（d）{返回d.text；}）
.attr（“字体大小”，14）
//上标内容：
text.append（“tspan”）
.text（函数（d）{return”“+d.super；}）
.attr（“dy”，-5）
.attr（“字体大小”，11）

---

由于在unicode中，

%

没有上标字符，因此您必须采用Andrew Reid在其。虽然他的方法没有错，但通过使用

的属性，您可以使您的生活更轻松，代码更可读：

baseline shift

属性允许相对于父文本内容元素的主基线重新定位主基线。移位的对象可能是一个子或上标

由于可以将

tspan

嵌套在普通文本中，因此无需显式定位元素。您的代码可以是以下代码：

<text x="100" y="100">
  Test
  <tspan baseline-shift="super" font-weight="bolder" font-size="62%">75%</tspan>
</text>

---

定位a

g

并添加2个

文本

元素，一个带有锚定

结束

元素，一个带有锚定

开始

（%），设置较小百分比的字体大小。根据结果，使用

dy

重新定位其中一个文本相对位置