Перетащите позицию в d3

Question

const width = grid.clientWidth;
const height = grid.clientHeight;
svg.attr("width", width).attr("height", height);
const xValue = d => d.cx;
const yValue = d => d.cy;
const xScale = scaleLinear()
    .domain([-10, 10])
    .range([0 , width])
    .nice();

const yScale = scaleLinear()
    .domain([-10, 10])
    .range([height , 0 ])
    .nice();
svg
    .append("g")
    .attr("transform", `translate(${0},${yScale(0)})`)
    .call(axisBottom(xScale));

svg
    .append("g")
    .attr("transform", `translate(${xScale(0)},${0})`)
    .call(axisLeft(yScale));

function dragged(d) {
    console.log(event.x);
    select(this)
      .attr("cx", (d.x = event.x))
      .attr("cy", (d.y = event.y))
      .attr("transform", d => `translate(${xScale(xValue(d))},${yScale(yValue(d))})`);
  }
const pointG = svg.append("g");
  pointG
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", d => xValue(d))
    .attr("cy", d => yValue(d))
    .attr("transform", `translate(${d => xScale(xValue(d))},${d => yScale(yValue(d))})`)
    .attr("r", radius).call(
      drag()
        .on("drag", dragged)
    );;
};
const data = [
  {
    cx: 9.0,
    cy: -9.38
  }
     {
       cx: 5.0,
       cy: 9.0
     }
];

В основном я хочу реализовать такой инструмент, как координатная плоскость Desmos: https://www.desmos.com/calculator/q8mwzeylbk.

Я нарисовал координатную плоскость в центре SVG, теперь я рисую некоторые точки на этой координатной плоскости. Проблема в том, что я получу координату пикселя после перетаскивания не той координаты, которую я хочу. Как получить координату перетаскиваемой точки по координатной плоскости? Должен ли я использовать функцию scale.invert () для преобразования координат SVG?

Answer 1

У вас уже установлены функции весов, чтобы получить x и y, используйте эту функцию внутри dragged():

var planeX = xScale(xValue(d));
var planeY = yScale(yValue(d));