SI ticks格式與十進制範圍域

我正在設計一個散點圖。在下面的例子中，比例函數的輸入域是[0.04,0.9]。在軸上使用.tickFormat(d3.format(".1s"))以便在需要時顯示SI消除。當運行以下剪斷，你會發現，那不是顯示0.5的標籤顯示500米：SI ticks格式與十進制範圍域

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我想D3與0.5堅守在這種情況下。如果輸入域下降到[0.004,0.009]，它應該只切換到SI abbriviation。

http://jsfiddle.net/kreide/hw9vcnkc/（的jsfiddle如果你需要嘗試一下我的例子）

來源

2014-12-13 zunder

D3沒有任何內置對這樣的特殊外殼的規定，但你可以很容易地做到這一點你自己。例如，省略了「m」個後綴僅當數目爲至少0.1，使用以下代碼：

.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。

來源

2014-12-13 15:21:48

太糟糕了，沒有通用的方法，因爲我需要在使用微單元時提供模式等。例如，域** [0.0001，0.0002] ** - 而不是**100μ**我想顯示** 0.1m **。這一點實際上是以**/100步**進入下一個SI，而不是**/1000 **。我想我需要爲你的所有可能的單位提供一個功能。這是我可以得到的最好的解決方案，所以非常感謝您指出。 – zunder 2014-12-13 15:39:59

在這種情況下，您可以查看SI單元格式的實現並根據您的需要進行調整。 – 2014-12-13 15:52:11

SI ticks格式與十進制範圍域

回答

相關問題