Wie ändern Sie den letzten Tick-Wert in D3.js?

Question

sagen, dass ich so etwas wie dieses:

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

Wie kann ich den letzten Wert

80 

zu

> 80 

Ich habe versucht,

.tickValues(); 

ändern ed iting

.domain() 

usw.

Answer 1

Sie müssen .tickFormat verwenden tick Text zu ändern. Der einfachste Weg dies zu tun, besteht darin, zu prüfen, ob das Datum für ein bestimmtes Häkchen gleich 80 ist, wie unten gezeigt, und dieses Häkchen zu modifizieren.

Beachten Sie jedoch, d3 versucht, Ticks zu optomieren. Diese Prüfung funktioniert nicht, wenn d3 entscheidet, dass bei 80 kein Häkchen angezeigt wird. In diesem Fall kann mit .tickValues sichergestellt werden, dass ein Häkchen den Wert aufweist, den Sie ändern möchten .

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>

Answer 2

Dies kann die Überprüfung durchgeführt werden, wenn die Zecke die letzte ist, die zweite und dritte Argument verwenden:

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

Da es kein Element bei n[i + 1] ist der letzte Index wird zurückgeben false.

Dann stellt das ternäre sicher, dass Sie die gewünschte Änderung unabhängig vom Wert nur auf den letzten Tick anwenden. Hier

ist die Demo:

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>