使用D3.js版本4,有没有办法获得轴上每个刻度的值数组？
编辑:
从D3 文档
#axis.tickValues([values])<>
如果指定了值数组,则指定的值将用于刻度,而不是使用刻度的自动刻度生成器.如果values为null,则清除任何先前设置的显式滴答值并恢复为scale的tick生成器.如果未指定值,则返回当前刻度值,默认值为null.
我正在使用自动滴答发生器,所以如果我打电话
var tickValues = axis.tickValues();
tickValues 是 null
如果您有对轴的引用,则可以使用:
axis.scale().ticks()
如果你想要将它们全部格式化,我会从DOM中获取它们:
d3.selectAll(".tick>text")
.nodes()
.map(function(t){
return t.innerHTML;
})
运行代码:
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 0, bottom: 20, left: 0},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scalePoint()
.domain([0, 1, 2])
.range([0, width])
.padding(1);
var y = d3.scaleLinear()
.domain([-1e6, 2e6])
.range([height, 0]);
var axis = d3.axisLeft(y)
.ticks(20, "s");
g.append("g")
.attr("transform", "translate(" + x(0) + ",0)")
.attr("class", "axis")
.call(axis);
console.log(
axis.scale().ticks()
);
console.log(
d3.selectAll(".tick>text")
.nodes()
.map(function(t){
return t.innerHTML ;
})
);
</script>