Question

当前代码：

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

当前输出：

面积：20mm2

预期产出：

面积：20mm ²

Answer 1

从此示例中：http://bl.ocks.org/mbostock/6738109

您可以执行以下操作：

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

工作示例：

＆＃13;

var svg = d3.select('body').attr('width', 500).attr('height', 500);

var svgText = svg.append('text').text('This is a test : mm²')

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

Answer 2

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

使用SVG的tspan element：

示例（请注意，它附加在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')

使用SVG的foreignObject element（请注意，此方法需要通过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中使用子/超级脚本。

如何添加上标＆amp; D3中的文字下标

2 个答案: