How to change the last tick value in D3.js?

Question

Let's say I have something like this:

|------|------|------|------|------|------|------|------|
0      10     20     30     40     50     60     70     80

How to change the last value

80

to

> 80

I tried,

.tickValues();

editing

.domain()

and etc.

Answer 1

To change the tick text you need to use .tickFormat. The easiest way to do this is to check if the binding for a specific tick 80 matches as shown below and change that tick.

Please note that d3 tries to optimize ticks, this check will not work if d3 decides that it does not want a mark of 80, in which case use .tickValuescan guarantee that the tick is at the value that you want to change.

var width = 300;
var height = 200;

var svg = d3.select("body")
  .append("svg")
  .attr("width",width+40)
  .attr("height",height)
  .attr("transform","translate(20,20)"); 

var x = d3.scaleLinear()
  .domain([0,80])
  .range([0,width]);
  
var xAxis = d3.axisBottom(x)
   .tickValues([0,20,30,40,50,60,70,80])
   .tickFormat(function(d) { return (d == 80) ? "> 80" : d; })
    
svg.call(xAxis);
  
  

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

Run codeHide result

Answer 2

, , , :

var axis = d3.axisBottom(scale)
    .tickFormat(function(d, i, n) {
        return n[i + 1] ? d : ">" + d;
    })

n[i + 1] , false.

, , , .

:

var svg = d3.select("svg");
var scale = d3.scaleLinear()
  .range([20, 480])
  .domain([0, 80]);

var axis = d3.axisBottom(scale)
  .tickFormat(function(d, i, n) {
    return n[i + 1] ? d : ">" + d;
  })

var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

Hide result