Нарисуйте ось d3 с реакцией, без прямого манипулирования D3 DOM

Question

Я делаю визуализацию данных, используя d3 и реагирую. Я пытаюсь использовать реакцию для рендеринга и d3 только для выполнения расчетов.

Чтобы нарисовать ось X, у меня есть <g> со ссылкой и для визуализации оси X, я просто использую:

const drawAxis = (graphData: graphData[], refXAxis: any, refYAxis: any, xScale: ScaleD3, yScale: ScaleD3): void => {
    let xAxis = d3.axisBottom(xScale);
    let yAxis = d3.axisLeft(yScale);
    let a = d3.select(refXAxis).call(xAxis);
    d3.select(refYAxis).call(yAxis); // so, this line manipulates DOM, I want to do *this* with react.
};

Можно ли сделать это react способом? *

Answer 1

Я предлагаю вам использовать d3 только для вычислений, как вы сказали, поэтому используйте d3 только для создания тиков.

У вас есть xScale и yScale, поэтому у вас есть диапазоны. Вы можете создать простой горизонтальный line с x1 = xScale.range()[0] и x2 = xScale.range()[1]. И аналогично для вертикальной оси, используя значения yScale.range().

Тогда вы можете получить все значения тиков, просто набрав const ticks = xScale.ticks() и т. Д.

Выполнив таким образом, вы получите некоторые Преимущества:

• вам не нужны ссылки, которые не так хороши в React
• вы можете управлять созданием DOM по своему желанию

Здесь Пример