如何在D3 React折线图中将X轴坐标值打印到控制台

Question

我是d3的新手，它有反应，并查看是否有一种方法可以将x轴刻度转换值打印到控制台上

我需要这些点来实现其他一些功能，并且希望有一种捕获这些点的方法。

Answer 1

您可以使用scale.ticks()，这是轴生成刻度的方式，不是通过特定于轴的功能而是通过刻度：

// Without tickArguments (same as default behavior):
var ticks = x.ticks(count); // count is optional, defaults to 10, number not always achieved in order to get clean round tick values.

// If tickArguments are specified:
var ticks = x.ticks(...axis.tickArguments())

一旦获得刻度值（未缩放），就可以缩放它们以获得缩放/转换后的值，也许是这样的：

var x = d3.scaleLinear()
  .domain([0,100])
  .range([0,500]);
  
var axis = d3.axisBottom()
  .scale(x)
  .tickArguments([20, "s"]);
  
// Without tickArguments:
var ticks = x.ticks();
var xValues = ticks.map(function(t) {
  return x(t);
})
console.log(xValues);

// With tickArguments:
var ticks = x.ticks(...axis.tickArguments())
var xValues = ticks.map(function(t) {
  return x(t);
})
console.log(xValues);


// With a specific count and no tick arguments:
var ticks = x.ticks(2)
var xValues = ticks.map(function(t) {
  return x(t);
})
console.log(xValues);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>