SI 用十进制刻度域标记格式答案

【问题标题】：SI ticks formatting with a decimal scale domainSI 用十进制刻度域标记格式
【发布时间】：2014-12-13 14:52:25
【问题描述】：

我正在设计一个散点图。在下面的例子中，尺度函数的输入域是 [0.04, 0.9]。 .tickFormat(d3.format(".1s")) 用于轴上，以便在需要时显示 SI 缩写。在运行以下截图时，您会注意到，标签不是显示 0.5，而是显示 500m：

var margin = {top: 20, right: 0, bottom: 20, left: 0},
    width = 300 - margin.left - margin.right,
    height = 175 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain([0])
    .rangePoints([0, width], 1);

var y = d3.scale.linear()
    .domain([0.04, 0.9])
    .range([height, 0]);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("transform", "translate(" + x(0) + ",0)")
    .attr("class", "axis")
    .call(d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(2)
      .tickFormat(d3.format(".1s")));

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font: 10px sans-serif;
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

在这种情况下，我希望 d3 坚持 0.5。只有当输入域下降到类似 [0.004, 0.009] 时，它才应该切换到 SI 缩写。

http://jsfiddle.net/kreide/hw9vcnkc/（如果您需要用我的示例尝试一下，请使用 jsfiddle）

【问题讨论】：

标签： javascript d3.js format scale axis-labels

【解决方案1】：

D3 没有像这样的特殊外壳的任何内置规定，但您可以自己轻松地做到这一点。例如，要仅在数字至少为 0.1 时省略“m”后缀，请使用以下代码：

.tickFormat(function(d) {
      console.log(d3.formatPrefix(d));
      if(d3.formatPrefix(d).symbol == "m" && d >= 0.1) {
          return d;
      } else {
          return d3.format(".1s")(d);
      }
  })

完整演示here。

【讨论】：

太糟糕了，没有通用的方法，因为我需要在使用微单元等时提供一个模式。例如域 [0.0001, 0.0002] - 我想显示 0.1m 而不是 100µ。关键在于以 /100 步 而不是 /1000 进入下一个 SI。我想我需要为所有可能的单位提供像你这样的功能。这是我能得到的最佳解决方案，非常感谢您指出这一点。
在这种情况下，您可以查看 SI 单位格式的实现并根据您的需要进行调整。

【解决方案2】：

顺便说一句，如果有人正在为 D3 v4 寻找一种方法：

.tickFormat(function(d) {
  let val = formatPrefix(".1s", d)(d);
  console.log(val);
  // if the formatted number uses the SI prefix "m" for milli, then just return the raw number
  // ie return .5 instead of 500m
  if(val.match(/m$/) && d >= 0.1) {
    return d;
  } else {
    return format(".1s")(d); //all other numbers should get the SI treatment
  }
})

【讨论】：