javascript - D3 对数刻度标签作为 10 的幂

Question

我想使用 D3 创建一个如下所示的 X 轴:

我已经弄清楚如何使用以下方法制作轴和刻度，但不是标签:

var svgWidth = 500;
var svgHeight = 500;
var svgAxisPadding = 20;

var xScale = d3.scale.log()
  .domain([Math.pow(10, 5), Math.pow(10, 7)])
  .range([svgAxisPadding, svgWidth - svgAxisPadding]);

var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient('bottom')
  .ticks(0, "e");

var svg = d3.select('#diagram')
  .append('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight);

svg.append('g')
  .attr("class", "axis")
  .call(xAxis);

这是一个 jsFiddle带有完整的代码。

Answer 1

你可以使用 unicode:

var superscript = "⁰¹²³⁴⁵⁶⁷⁸⁹",
    formatPower = function(d) { return (d + "").split("").map(function(c) { return superscript[c]; }).join(""); },
    formatTick = function(d) { return 10 + formatPower(Math.round(Math.log(d) / Math.LN10)); };

例如，formatTick(1e5) 返回 "10⁵"。示例位于 bl.ocks.org/6738109 :

这种方法的缺点是上标数字的垂直对齐方式似乎不一致。因此，使用后选择(例如，选择文本元素并为每个上标添加一个 tspan 元素)可能会更好。另一个例子在 bl.ocks.org/6738229 :