D3百分比上标 [英] D3 percentage superscript

问题描述

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

I am trying to get a little percent sign superscript.

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

I found and example which works but not percent

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

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

Is there a way that I could do the same with the percent?

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

使75％的标上标

推荐答案

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

Why not use a tspan? This will allow you to format any text how you want, superscript or otherwise, no matter if there is a unicode superscript symbol you can use:

在一个元素内，文本和字体属性以及当前文本 位置可以使用绝对或相对坐标值进行调整 通过包括< tspan>元素. ( MDN )

Within a element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element. (MDN)

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

There are a few approaches you could take in this regard, but if you can extract the text that needs to be superscript (or generate it on the fly), then you can create the superscript and regular text relatively easly. Below I use a tspan to hold the regular text and another to hold the superscript:

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>

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

With a bit of string manipulation you could use this pattern without pre-existing properties for each text string (below I use only one text span with normal text just being added as normal):

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元素的宽度)更容易管理.

The tspan approach is useful in that it maintains text position, which is easier to manage than placing multiple text elements where the position of each depends on the width of other text elements.

这篇关于D3百分比上标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！