如何更改D3.js中的最後一個刻度值？

Question

說我有這樣的事情：

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

我怎樣才能改變的最後一個值

80 

到

> 80 

我試過，

.tickValues(); 

ED iting

.domain() 

等

Answer 1

您需要使用.tickFormat改變蜱文本。要做到這一點，最簡單的方法是檢查特定滴答的數據是否等於80，如下所示，並修改該滴答。

但是請注意，d3會嘗試選擇刻度，如果d3決定不想在80處打勾，則此檢查將不起作用，在這種情況下，使用.tickValues可以確保刻度處於您想要更改的值。

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

這可以檢查是否蜱是使用第二和第三個參數是最後一個：

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>