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