d3.js - d3.js v5 混合基线 tspan

Question

我的 d3 视觉对象上绘制了几条不同的线，我不想创建图例，而是想在坐标空间中放置一些标签。为此，我正在尝试附加一些 svg tspan。每个标签的文本是：

第 1 组

组 1 b

第 1 组 c

我有三行，所以需要三个标签。“Group 1”部分应该是正常的，字母“ab和c”应该是下标。经过一番研究，我了解到 tspan 有一个basline-shift属性。我试过了：

svg.append('text')
    .append('tspan')
    .attr('x', 10)
    .attr('y', 20)
    .attr('baseline-shift', 'sub')
    .text('Group 1c');

出现了 tspan，但似乎我只能让它接受所有普通文本或所有下标文本——而不是两者的混合。

问题

鉴于我上面详述的目标，我应该如何最好地修改混合 tspan 的实现？我为这项任务选择 tspan 是否正确？据我所知，下标 b 和 c 没有Unicode，这使得 tspan 看起来可能是我特定任务的唯一解决方案。

标签： d3.js

Answer 1

事后看来，这似乎很明显，但我将展示一种我发现可行的方法。而不是删除这个问题，我将发布我的解决方案，因为似乎很少/没有类似的问题。Tspans 和 sub/superscripts 可能很棘手，所以希望这会对某人有所帮助。一旦 riov8 向我展示了我忽略了附加父级text，我就能够进行更有效的故障排除。

添加标签可以给我们普通和下标的混合.html()：<tspan>

svg.append('text')
    .append('tspan')
    .attr('x', 10)
    .attr('y', 20)
    .html('Group 1 <tspan baseline-shift=sub>c</tspan>');