11

使用 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 。

4

2 回答 2

14

你可以使用 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的另一个例子：

轴

于 2013-09-28T03:44:00.337 回答
2

tickFormat轴上有一个可用的功能。不幸的是，它期望一个字符串作为返回值并将其放在轴上。如果您想显示 10^6，这将非常有用，但当您想使用上标符号时就没有那么有用了。

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

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);

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

于 2013-09-27T16:37:03.920 回答