如何更改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>