如何更改D3.js中的最后一个刻度值?
问题描述:
说我有这样的事情:如何更改D3.js中的最后一个刻度值?
|------|------|------|------|------|------|------|------|
0 10 20 30 40 50 60 70 80
我怎样才能改变的最后一个值
80
到
> 80
我试过,
.tickValues();
ED iting
.domain()
等
答
您需要使用.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>
答
这可以检查是否蜱是使用第二和第三个参数是最后一个:
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>
几乎在同一时间!不过,我的情况有点不同。 –
我已经看到你的弹出,因为我正在检查我的语法许多次 - 嗯,我的体育精神徽章的进展仍然是由于你的答案。 –
这工作完美。谢谢 – rotaercz