我正在使用 d3 和 React 进行数据可视化。我尝试使用 React 来渲染，使用 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 中做到这一点吗？方式？.
最佳答案
正如您所说，我建议您仅使用 d3 进行计算，因此仅使用 d3 来创建刻度。
您有 xScale 和 yScale，因此您有范围。
您可以使用 x1 = xScale.range()[0] 和 x2 = xScale.range()[1] 创建一条简单的水平线 。与垂直轴类似，使用 yScale.range() 值。
然后您只需执行 constticks = xScale.ticks() 即可获取所有刻度值，依此类推。
这样做有一些优势:
- 你不需要 React 中不太好的引用资料
- 您可以根据需要控制 DOM 创建
Here一个例子
关于javascript - 使用 React 绘制 d3 轴，无需直接操作 D3 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61148301/