[英]D3 v4 - Get the value of the each tick present on an axis?
使用 D3.js 版本 4,有沒有辦法獲取軸上每個刻度的值數組?
編輯:
來自 D3文檔
#axis.tickValues([values]) <>
如果指定了 values 數組,則指定的值將用於刻度,而不是使用刻度的自動刻度生成器。 如果 values 為空,則清除任何先前設置的顯式刻度值並恢復到刻度的刻度生成器。 如果未指定值,則返回當前刻度值,默認為空。
我正在使用自動滴答生成器,所以如果我打電話
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>
我發現上面馬克的答案不適合我的情況,我從他的靈感中改變了一點,它奏效了
// I am using d3-scale
const yScale = scaleLinear().domain(realYDomain).range([30, 170]);
// I am using d3-axis
const yAxis = axisLeft(yScale); // Not declare axisLeft(scale).ticks(number) here, but below line instead
const tickValues = yAxis.scale().ticks(5);
console.log(tickValues);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.