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的另一个例子: