십진수 스케일 도메인으로 SI 틱을 틱

Question

분산 형 플롯을 설계 중입니다. 다음 예에서 축척 함수의 입력 도메인은 [0.04, 0.9]입니다. 필요한 경우 SI 표시를 표시하기 위해 .tickFormat(d3.format(".1s"))이 축에 사용됩니다. 냈다 다음 실행하는 동안, 당신은 대신 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; 
 
}

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

내가 D3이 경우 0.5을 고수하고자합니다. 입력 영역이 [0.004, 0.009]과 같이 내려 가면 SI 번복으로 전환해야합니다.

http://jsfiddle.net/kreide/hw9vcnkc/ (jsfiddle 내 예와 그것을 밖으로 시도해야하는 경우)

Answer 1

는 D3는하지 않는이 같은 특수 케이스에 대한 규정을 내장,하지만 당신은 쉽게 직접 할 수 있습니다.

.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.1 인 경우에만, 예를 들어, "m"접미사를 생략하는, 다음 코드를 사용한다.