I am designing a scatter plot. In following example the input domain of scale function is [0.04, 0.9]. .tickFormat(d3.format(".1s"))
is used on axis in order to display SI abbriviation if needed. While running following snipped, you will notice, that instead of displaying 0.5 the label is showing 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>
I want d3 to stick with 0.5 in this case. It should only switch to SI abbriviation if the input domain goes down to something like [0.004, 0.009].
http://jsfiddle.net/kreide/hw9vcnkc/ (jsfiddle if you need to try it out with my example)
D3 doesn't have any built-in provisions for special casing like this, but you can easily do this yourself. For example, to omit the "m" suffix only if the number is at least 0.1, use the following code:
.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);
}
})
Complete demo here.