你如何改变D3.js中的最后一个刻度值？

Question

说我有这样的事情:

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

如何更改最后一个值

80

至

> 80

我试过了,

.tickValues();

编辑

.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>