I have a d3.v3.js histogram and I'd like to fix the misleading extreme ticks of the bins because they are shown as a number but they actually are -Inf and +Inf.
I figured how to do this but I wanted to use the actual math symbol rather than Inf. The encoding is shown in the SO question infinity-symbol-with-html i.e. using the HTML entity ∞ or ∞ but when I do:
var ticks = 10;
var x = d3.scale.linear()
.domain([min, max])
.range([0, width]);
var xTicks = x.ticks(ticks);
var data = d3.layout.histogram().bins(xTicks)(values);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(ticks)
.tickFormat(function (value) {
var result: string;
if (value === xTicks[0]) {
result = '-∞'; // <======================== here -Inf
} else
if (value === xTicks[xTicks.length - 1]) {
result = '+∞'; // <======================== here +Inf
} else {
result = tickFormat(value);
}
return result;
});
the HTML entities are not recognized as such but taken as a string literal.
