使用可变比例尺时，如何用React与D3实现关注点分离？

Awesome question! Shirley Wu's pattern for splitting concerns between React and D3 is a total game-changer for keeping your code clean—let’s walk through exactly how to make this work for your circular node visualization.

1. 先把职责边界划清楚 #

Shirley的核心思路就是让React和D3各干各的擅长的事，别交叉：

• React：管组件的生命周期、状态管理（比如数据集更新）、给D3提供DOM容器，不碰可视化的细节计算。
• D3（你的visualisation/node.js）：只负责计算可视化属性（比如节点位置、大小）和操作DOM的视觉表现，不用关心React的状态怎么变、组件怎么渲染。

简单说就是：React管“框架层面的事”，D3管“可视化层面的事”。

2. 可变比例尺的正确打开方式 #

比例尺依赖数据集的value范围，所以绝对不能让D3模块自己去算比例尺的域（domain）——那会打破关注点分离。正确的流程是：

• 由React父组件计算比例尺：因为它持有完整的数据集，能拿到value的最大值和最小值，生成配置好的比例尺。
• 把现成的比例尺传给D3模块，让它直接用这个比例尺去计算节点位置。

3. 具体代码示例 #

第一步：React父组件（比如App.js） #

这里负责管理数据、生成比例尺，把容器、数据、比例尺都传给D3模块：

import React, { useEffect, useRef } from 'react';
import { initNodes, updateNodes } from './visualisation/node';
import { scaleLinear } from 'd3-scale';

function App() {
  const svgRef = useRef(null);
  // 你的数据集
  const dataset = [
    { id: 1, value: 20 },
    { id: 2, value: 50 },
    { id: 3, value: 30 },
    // ...更多数据项
  ];

  // 计算比例尺：域是数据value的范围，范围对应SVG内的可用宽度
  const xScale = scaleLinear()
    .domain([0, Math.max(...dataset.map(d => d.value))])
    .range([50, 750]); // 左边留50px边距，右边留50px（SVG总宽800）

  useEffect(() => {
    if (!svgRef.current) return;

    // 初始化节点：把容器、数据、比例尺都传进去
    initNodes(svgRef.current, dataset, xScale);

    // 组件卸载时清理D3创建的元素
    return () => {
      select(svgRef.current).selectAll('.node').remove();
    };
  }, [dataset, xScale]); // 数据或比例尺变了就重新执行

  return (
    <svg ref={svgRef} width={800} height={400}></svg>
  );
}

export default App;

第二步：D3模块（visualisation/node.js） #

这里只专注于节点的视觉属性，完全依赖外部传入的参数，不碰数据集的全局逻辑：

import { select } from 'd3-selection';

// 初始化节点
export function initNodes(container, data, xScale) {
  select(container)
    .selectAll('.node')
    .data(data)
    .enter()
    .append('circle')
    .attr('class', 'node')
    .attr('r', 15) // 节点半径
    .attr('fill', '#2c3e50') // 节点颜色
    .attr('cx', d => xScale(d.value)) // 用传入的比例尺算x位置
    .attr('cy', 200); // y轴位置固定，也可以传y比例尺进来
}

// 数据更新时的更新逻辑（可选）
export function updateNodes(container, newData, xScale) {
  const nodes = select(container)
    .selectAll('.node')
    .data(newData);

  // 新增节点
  nodes.enter()
    .append('circle')
    .attr('class', 'node')
    .attr('r', 15)
    .attr('fill', '#2c3e50')
    .attr('cx', d => xScale(d.value))
    .attr('cy', 200);

  // 更新现有节点的位置
  nodes.attr('cx', d => xScale(d.value));

  // 移除多余节点
  nodes.exit().remove();
}

4. 为什么这符合关注点分离？ #

• React父组件：掌控全局状态、计算依赖全局数据的比例尺、提供DOM容器——这是React擅长的“协调”和“状态管理”工作。
• D3模块：只处理可视化细节，接收外部传入的配置和数据，不需要知道React的组件结构或状态变化——这是D3擅长的“视觉计算”工作。
• 后续修改时互不干扰：比如要调整SVG尺寸，只改React里的比例尺range；要改节点颜色，只改node.js里的fill属性。

5. 额外小提示 #

• 当数据集更新时，一定要把dataset加入ReactuseEffect的依赖数组，确保比例尺会重新计算。
• 如果需要y轴的比例尺，逻辑完全一样：在React里算好，传给D3模块就行。
• 别让D3模块自己去获取DOM容器的尺寸，最好由React计算好后传进来，保持D3模块的纯粹性。

内容的提问来源于stack exchange，提问作者Tom