Question

说我有这样的事情：

|------|------|------|------|------|------|------|------|
0      10     20     30     40     50     60     70     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>

Answer 2

可以使用第二个和第三个参数检查tick是否是最后一个：

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

由于n[i + 1]处没有元素，最后一个索引将返回false。

然后，三元组确保您只对最后一个刻度应用您想要的任何更改，无论其值如何。

以下是演示：

＆＃13;

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)

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

＆＃13;

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

2 个答案: