reactjs - 如何在 d3 反应折线图中将 X 轴坐标值打印到控制台

Question

我是 d3 的新手，反应并查看是否有办法将 x 轴刻度转换值打印到控制台

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

标签： reactjsd3.jssvg

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>