Question

我的d3视觉图形上画有几条不同的线，我不想在创建图例的同时在坐标空间中放置一些标签。为此，我正在尝试添加一些svg tspans。每个标签的文本为：

第1组a

第1组b

第1组c

我有三行，因此需要三个标签。 “第1组”部分应该是正常的，字母“ a b和c”应该是下标。经过一些研究，我了解到tspans具有basline-shift属性。我尝试过：

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

tspan出现了，但看来我只能让它接受 all 普通或 all 下标文本-不能同时使用两者。

问题

鉴于上述详细目标，我该如何最好地修改混合tspan的实现？我为此任务选择tspans正确吗？据我所知，没有Unicode for subscript b和c，这使得tspan似乎是我特定任务的唯一解决方案。

Answer 1

事后看来，这似乎很明显，但是我将展示一种发现有效的方法。而且，我不会发布此问题，而是发布解决方案，因为似乎很少/没有类似问题。 Tspan和下标/上标可能会很棘手，因此希望对您有所帮助。 riov8向我展示后，我便忽略了附加父级text，从而能够进行更有效的故障排除。

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

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