D3.js人体区域图表开发求助：缩放、组件迁移及功能优化

1. 画布缩放控制优化 #

通过SVG的viewBox属性结合D3缩放行为，实现精准的画布缩放控制，替代单纯的viewport宽高设置：

// 初始化SVG时配置viewBox与缩放逻辑
const svg = d3.select("#chart-container")
  .append("svg")
  .attr("viewBox", `0 0 ${width} ${height}`)
  .attr("preserveAspectRatio", "xMidYMid meet") // 保持图形比例居中缩放
  .call(d3.zoom().on("zoom", function(event) {
    // 仅对人体图形分组应用缩放变换
    d3.select("#body-groups").attr("transform", event.transform);
  }));

• viewBox定义SVG可视区域范围，preserveAspectRatio确保缩放时不会变形
• 将缩放作用于包含人体图形的<g>元素，避免图例等辅助元素被缩放影响

2. 整合人体前后视图并支持多区域同时选择 #

将前后视图放入同一SVG的独立分组，通过偏移定位区分，共用选中状态集合实现同时选择：

// 创建前后视图分组并设置偏移
const frontGroup = svg.append("g").attr("transform", "translate(0, 0)");
const backGroup = svg.append("g").attr("transform", `translate(${width/2 + 30}, 0)`);

// 统一绑定选择事件逻辑
const selectedAreas = new Set();
function bindAreaSelection(selection) {
  selection.on("click", function(event, d) {
    const areaId = d.id;
    if(selectedAreas.has(areaId)) {
      selectedAreas.delete(areaId);
      d3.select(this).classed("selected", false);
    } else {
      selectedAreas.add(areaId);
      d3.select(this).classed("selected", true);
    }
  });
}

// 渲染前后视图区域并绑定事件
bindAreaSelection(frontGroup.selectAll(".body-area").data(frontData).enter().append("path"));
bindAreaSelection(backGroup.selectAll(".body-area").data(backData).enter().append("path"));

• 用Set存储选中区域ID，确保前后视图区域可同时被选中
• 通过分组偏移避免视图重叠，保持布局清晰

3. 迁移为React组件并实现预选中功能 #

利用React的useRef和useEffect钩子整合D3逻辑，通过props传入预选中ID实现初始化选中：

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const BodyChart = ({ preSelectedAreas = [] }) => {
  const chartContainer = useRef(null);
  const selectedSet = useRef(new Set(preSelectedAreas));

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

    // 初始化SVG基础结构
    const svg = d3.select(chartContainer.current)
      .append("svg")
      .attr("viewBox", "0 0 800 600");

    // 渲染人体区域后设置预选中样式
    const areas = svg.selectAll(".body-area")
      .data(bodyAreaData)
      .enter()
      .append("path")
      .attr("class", "body-area");
    
    areas.each(function(d) {
      if (selectedSet.current.has(d.id)) {
        d3.select(this).classed("selected", true);
      }
    });

    // 绑定区域选择事件（省略重复逻辑）
  }, [preSelectedAreas]);

  return <div ref={chartContainer} className="body-chart" />;
};

export default BodyChart;

• 用useRef存储选中状态集合，避免React重渲染时丢失状态
• 组件挂载时根据preSelectedAreas props初始化区域选中样式

4. 图例尺寸优化与默认激活红色图例 #

调整图例元素的尺寸和样式压缩空间，并在初始化时主动激活红色图例：

// 优化图例布局与尺寸
const legendGroup = svg.append("g").attr("transform", "translate(20, 20)");
legendGroup.selectAll(".legend-item")
  .data(legendData)
  .enter()
  .append("g")
  .attr("class", "legend-item")
  .attr("transform", (d, i) => `translate(0, ${i * 18})`) // 缩小行间距
  .each(function(d) {
    // 缩小图例方块
    d3.select(this).append("rect")
      .attr("width", 12)
      .attr("height", 12)
      .attr("fill", d.color);
    // 缩小字体
    d3.select(this).append("text")
      .attr("x", 18)
      .attr("y", 10)
      .style("font-size", "12px")
      .text(d.label);
  });

// 默认激活红色图例
legendGroup.selectAll(".legend-item")
  .filter(d => d.color === "red")
  .classed("active", true);

• 减小图例方块尺寸、文字字号和行间距，压缩整体占用空间
• 通过过滤找到红色图例元素，添加active类实现默认激活状态

内容的提问来源于stack exchange，提问作者The Old County