Question

我正在尝试获取一点百分号上标。

我找到了一个可行的例子，但没有成功

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

有没有办法对百分比进行同样的处理？

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

使75％的标上标

Answer 1

为什么不使用tspan？这样，无论您是否可以使用unicode上标符号，都可以根据需要设置任何文本的格式（上标或其他）：

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

在这方面可以采取几种方法，但是如果您可以提取需要上标的文本（或即时生成），则可以相对轻松地创建上标和常规文本。在下面，我使用tspan来保存常规文本，并使用另一个来保存上标：

var svg = d3.select("body").append("svg");

var data = [
  {text: "Here's some normal text", super:"Here's superscript"}, 
  {text:"Some text", super:"α,β,γ,%,!,1,2,3"}
];

var text = svg.selectAll()
  .data(data)
  .enter()
  .append("text")
  .attr("x", 10)
  .attr("y", function(d,i) { return i * 20 + 20; });
  
// Main content:
text.append("tspan")
  .text(function(d) { return d.text; })
  .attr("font-size", 14)
  
// Superscript content:
text.append("tspan")
  .text(function(d) { return " " +d.super; })
  .attr("dy",-5)
  .attr("font-size",11)

<script src="https://d3js.org/d3.v5.min.js"></script>

通过一些字符串操作，您可以在没有每个文本字符串预先存在属性的情况下使用此模式（下面，我仅使用一个文本跨度，而普通文本只是按常规添加）

var svg = d3.select("body").append("svg");

var data = [
  "Length is 10px - 10%",
  "Height is 20px - 30%"
];

var text = svg.selectAll()
  .data(data)
  .enter()
  .append("text")
  .attr("x", 10)
  .attr("y", function(d,i) { return i * 20 + 20; })
  .text(function(d) {
    return d.split("-")[0];
  });
  
// Superscript content:
text.append("tspan")
  .text(function(d) { return d.split("-")[1]; })
  .attr("dy",-5)
  .attr("font-size",11)

<script src="https://d3js.org/d3.v5.min.js"></script>

tspan方法很有用，因为它可以保持文本位置，比放置多个text元素（其中每个元素的位置取决于其他text元素的宽度）更易于管理

Answer 2

由于unicode中没有%的上标字符，因此您必须采用Andrew Reid在其answer中提出的方法。尽管他的方法没什么错，但是您可以使用<tspan>的{{3}}属性，使生活变得更轻松，代码也更易读：

baseline-shift属性允许相对于父文本内容元素的优势基线重新定位优势基线。移位的对象可能是下标或上标。

由于您可以将tspan嵌套在常规文本中，因此无需显式放置元素。您的代码可能类似于以下几行：

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

请查看以下D5演示示例片段：

var svg = d3.select("body").append("svg");

var text = svg
  .append("text")
    .attr("x", 50)
    .attr("y", 50)
    .text("Test");

// Superscript
text.append("tspan")
  .text("75%")
  .attr("baseline-shift", "super")
  .attr("font-size", "62%")
  .attr("font-weight", "bolder");

<script src="https://d3js.org/d3.v5.js"></script>

D3百分比上标

2 个答案: