Question

使用D3.js版本4，有没有办法获得轴上每个刻度的值数组？

编辑：

＃axis.tickValues（[values]）＆lt;＆gt;

如果指定了values数组，则指定的值用于刻度，而不是使用刻度的自动刻度生成器。如果values为null，则清除任何先前设置的显式滴答值并恢复为scale的tick生成器。如果未指定值，则返回当前刻度值，默认值为null。

我正在使用自动滴答发生器，所以如果我打电话

var tickValues = axis.tickValues();

tickValues是null

Answer 1

如果您引用了axis，则可以使用：

axis.scale().ticks()

如果你想要将它们全部格式化，我将从DOM中获取它们：

d3.selectAll(".tick>text")
  .nodes()
  .map(function(t){
    return t.innerHTML;
  })

运行代码：

＆＃13;

<!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>

＆＃13;

Answer 2

我发现上面Mark的答案不适合我的情况，我从他的灵感中改变了一点，并且奏效了

// 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);

D3 v4 - 获取轴上每个刻度的值？

＃axis.tickValues（[values]）＆lt;＆gt;

2 个答案: