如何在D3中的文本中添加上标和下标

Question

当前代码：

.text(function(){return "Area:"+d3.values(expensesTot)[count].area+"mm2";
 });

电流输出：

面积：20mm2

预期输出：

面积：20mm ²

Answer 1

接受的答案仅适用于数字，因此对于任何想要对其文本进行子脚本/子脚本的人来说，这里有两种方法：

1. 使用SVG的tspan 元素：

示例（请注意，它附加在text元素之后）：

svg.append('text')
  .attr('x', width / 2)
  .attr('y', height / 2)
  .html('Normal Text')
  .style('font-size', '2rem')
  .append('tspan')
    .text('Subscrit Text')
    .style('font-size', '.1rem')
    .attr('dx', '.1em')
    .attr('dy', '.9em')

2. 使用 SVG 的foreignObject 元素（注意，此方法需要通过 css 进行样式设置，并且（根据我的实验）需要内联样式设置：

内联 CSS 示例：

svg.append("foreignObject")
  .attr("x", width / 2)
  .attr("y", height / 2)
  .append("xhtml:body")
  .html("<p style='font-family:consolas;'=>mm<sup>2</sub></p>")

据我所知，该tspan方法是“正确”的解决方案，因为它允许通过 SVG 属性进行样式设置，但任一方法都适用于在 D3 中使用子/上脚本。

Answer 2

从这个例子： http: //bl.ocks.org/mbostock/6738109

\n\n

您只需执行以下操作：

\n\n

.text(function(){return "Area:"+d3.values(expensesTot)[count].area+"mm\xc2\xb2";\n });\n

\n\n

工作示例：

\n\n

\r\n

\r\n

.text(function(){return "Area:"+d3.values(expensesTot)[count].area+"mm\xc2\xb2";\n });\n

\r\n

var svg = d3.select(\'body\').attr(\'width\', 500).attr(\'height\', 500);\r\n\r\nvar svgText = svg.append(\'text\').text(\'This is a test : mm\xc2\xb2\')

\r\n

\r\n

\r\n

\n