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

ユニコードを使用できます：

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 に答える