D3.js 指针坐标相对于轴域答案

【问题标题】：D3.js Pointer Coordinates relative to the axis DomainD3.js 指针坐标相对于轴域
【发布时间】：2022-12-05 22:45:55
【问题描述】：

使用 d3.js 和 d3.pointer 类，我正在接收 pointermove 事件的 SVG 坐标。当轴不是从 0（或可能为负）开始时，我正在努力将这些坐标与线性轴上有意义的数字相关联。

function pointermoved(d) {
    const [x, y] = d3.pointer(d);
    document.getElementById("X-COORDINATES").innerHTML = x;
    document.getElementById("Y-COORDINATES").innerHTML = y;
}

如何将这些与绘制的轴域相关联？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

要将 SVG 坐标与线性轴上有意义的数字相关联，您可以使用倒置方法来自d3.scaleLinear班级。此方法采用 x 或 y 坐标并返回线性标度域上的相应值。

例如，如果您有一个域为 [0, 100] 且范围为 [0, 200] 的线性标度，则可以使用 invert 方法将 x 坐标 50 转换为域上的相应值，这将是 50。这是一个示例，说明如何使用 invert 方法执行此操作：

const xScale = d3.scaleLinear()
    .domain([0, 100])
    .range([0, 200]);

const xCoordinate = 50;
const xValue = xScale.invert(xCoordinate); // 50

您可以使用相同的方法将 y 坐标转换为 y 轴域上的值。

在您的代码中，您可以使用 invert 方法将 x 和 y 坐标从 d3.pointer 事件转换为线性刻度的 x 和 y 域上的相应值。这是您如何执行此操作的示例：

function pointermoved(d) {
    const [x, y] = d3.pointer(d);

    // Convert x and y coordinates to values on the x and y domains
    const xValue = xScale.invert(x);
    const yValue = yScale.invert(y);

    // Update the page with the converted values
    document.getElementById("X-COORDINATES").innerHTML = xValue;
    document.getElementById("Y-COORDINATES").innerHTML = yValue;
}

这个答案是使用 AI 生成的。

【讨论】：

“此答案是使用 AI 生成的。”是什么意思？意思是？