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

Answer 2

轴上有tickFormat个功能。不幸的是，它期望一个String作为返回值并在轴上发挥作用。如果你想显示10 ^ 6，这将是很好的，但是如果你想使用上标符号，则没有那么有用。

解决方法是创建2个轴：一个用于显示10个轴，另一个用于显示指数。这是一个example：

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")
    .tickFormat(function (d) {
        var log = Math.log(d) / Math.LN10;
        return Math.abs(Math.round(log) - log) < 1e-6 ? 10 : '';
    });

var xAxis2 = d3.svg.axis()
    .scale(xScale)
    .orient('bottom')
    .ticks(0, "e")
    .tickFormat(function (d) {
        var log = Math.log(d) / Math.LN10;
        return Math.abs(Math.round(log) - log) < 1e-6 ? Math.round(log) : '';
    });

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

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

svg.append('g')
    .attr("class", "axis")
    .attr("transform", "translate(12, -5)") //shifted up and to the right
    .style("font-size", "12px")
    .call(xAxis2);

它不一定是最优雅的解决方案，但它确实有效。