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

要将SVG坐标与线性轴上有意义的数字相关联,可以使用 倒转 方法 d3.刻度线性 班此方法采用x或y坐标,并返回线性比例域上的相应值。

例如,如果您有一个域为[0,100]、范围为[0、200]的线性比例,则可以使用反转方法将x坐标50转换为域上的相应值,即50。以下是如何使用反转方法进行此操作的示例:

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

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

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

在代码中,可以使用invert方法将d3.pointer事件的x和y坐标转换为线性刻度的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生成的。