React中D3.js可拖拽地球问题：无法横竖旋转且拖拽范围异常

1. 限制拖拽仅作用于地球本身 #

默认将拖拽行为绑定到SVG容器会导致整个区域响应拖拽，你需要把拖拽事件绑定到地球的路径元素上：

• 在渲染地球路径时，给它添加ref，再将D3拖拽行为绑定到该元素
• 核心代码片段：

const earthRef = useRef(null);

useEffect(() => {
  if (!earthRef.current) return;
  const drag = d3.drag()
    .on('drag', (event) => {
      // 拖拽逻辑写在这里
    });
  // 将拖拽绑定到地球路径元素
  d3.select(earthRef.current).call(drag);
}, []);

// 渲染部分
<svg>
  <path ref={earthRef} d={geoPath(projection)(geoSphere())} fill="blue" />
</svg>

2. 实现正确的垂直旋转 #

你需要同时处理拖拽的水平（dx）和垂直（dy）位移，映射到投影的经度（rotate[0]）和纬度（rotate[1]），并且必须限制纬度范围（避免地球翻转，通常限制在±85度左右）：

• 用React状态管理旋转参数：const [rotate, setRotate] = useState([0, 0, 0]);
• 更新拖拽事件逻辑：

const drag = d3.drag()
  .on('drag', (event) => {
    const [lambda, phi] = rotate;
    // 调整系数控制拖拽灵敏度
    const newLambda = lambda - event.dx * 0.5;
    // 限制纬度范围，防止地球翻转
    const newPhi = Math.max(-85, Math.min(85, phi + event.dy * 0.5));
    setRotate([newLambda, newPhi, 0]);
  });

• 关联投影与旋转状态：const projection = d3.geoOrthographic().rotate(rotate).fitSize([width, height], geoSphere());

完整简化示例代码 #

import React, { useState, useEffect, useRef } from 'react';
import * as d3 from 'd3';
import { geoOrthographic, geoPath, geoSphere } from 'd3-geo';

const DraggableEarth = () => {
  const [rotate, setRotate] = useState([0, 0, 0]);
  const earthRef = useRef(null);
  const width = 500;
  const height = 500;

  const projection = geoOrthographic()
    .rotate(rotate)
    .fitSize([width, height], geoSphere());
  const pathGenerator = geoPath(projection);

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

    const drag = d3.drag()
      .on('drag', (event) => {
        const [lambda, phi] = rotate;
        const newLambda = lambda - event.dx * 0.5;
        const newPhi = Math.max(-85, Math.min(85, phi + event.dy * 0.5));
        setRotate([newLambda, newPhi, 0]);
      });

    d3.select(earthRef.current).call(drag);

    return () => {
      d3.select(earthRef.current).on('drag', null);
    };
  }, [rotate]);

  return (
    <svg width={width} height={height}>
      <circle cx={width/2} cy={height/2} r={width/2} fill="#e0f7fa" />
      <path
        ref={earthRef}
        d={pathGenerator(geoSphere())}
        fill="#42a5f5"
        stroke="#1976d2"
        strokeWidth={2}
      />
    </svg>
  );
};

export default DraggableEarth;

关键注意点 #

• 拖拽行为必须绑定到地球路径，而非SVG容器，确保只有地球区域响应拖拽
• 垂直旋转时必须限制纬度范围，否则会出现地球翻转的异常交互
• 可调整event.dx/event.dy的系数，适配你需要的拖拽灵敏度

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