React中使用D3制作连续色条图例的依赖问题求助

先明确你遇到问题的根源：Observable上的@d3/color-legend是平台专属模块，并非公开npm包，所以npm install肯定找不到，别再折腾这个包了。下面给你两种可行的实现方式：

方案一：手动用D3原生API构建 #

无需额外安装包，只用核心d3包就能实现，步骤如下：

1. 确保已安装D3：

npm install d3

2. 编写React组件结合D3绘制色条图例：

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

const ContinuousColorLegend = ({ width = 200, height = 20, min = 0, max = 100, colorScale = d3.scaleSequential(d3.interpolateViridis) }) => {
  const svgRef = useRef(null);

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

    // 清除旧内容，避免重复渲染
    d3.select(svgRef.current).selectAll('*').remove();

    // 配置颜色比例尺定义域
    const color = colorScale.domain([min, max]);

    // 创建SVG容器
    const svg = d3.select(svgRef.current)
      .attr('width', width)
      .attr('height', height + 40); // 预留刻度空间

    // 绘制色条矩形
    svg.append('rect')
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', width)
      .attr('height', height)
      .style('fill', 'url(#gradient)');

    // 创建线性渐变
    const gradient = svg.append('defs')
      .append('linearGradient')
      .attr('id', 'gradient')
      .attr('x1', '0%')
      .attr('y1', '0%')
      .attr('x2', '100%')
      .attr('y2', '0%');

    // 给渐变添加颜色节点
    gradient.selectAll('stop')
      .data(d3.range(0, 1.01, 0.01))
      .enter()
      .append('stop')
      .attr('offset', d => `${d * 100}%`)
      .attr('stop-color', d => color(min + (max - min) * d));

    // 添加底部刻度轴
    const xScale = d3.scaleLinear()
      .domain([min, max])
      .range([0, width]);

    const xAxis = d3.axisBottom(xScale)
      .ticks(5);

    svg.append('g')
      .attr('transform', `translate(0, ${height + 10})`)
      .call(xAxis);
  }, [width, height, min, max, colorScale]);

  return <svg ref={svgRef}></svg>;
};

export default ContinuousColorLegend;

3. 在应用中使用组件：

import ContinuousColorLegend from './ContinuousColorLegend';

function App() {
  return (
    <div className="App">
      <h3>连续色条图例</h3>
      <ContinuousColorLegend min={0} max={50} colorScale={d3.scaleSequential(d3.interpolatePlasma)} />
    </div>
  );
}

方案二：使用社区维护的D3图例包 #

如果不想手动实现，可使用d3-svg-legend这个npm包，它原生支持连续色条图例：

1. 安装包：

npm install d3-svg-legend

2. 在React组件中使用：

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
import { legendColor } from 'd3-svg-legend';

const D3ColorLegend = ({ width = 200, min = 0, max = 100 }) => {
  const svgRef = useRef(null);

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

    d3.select(svgRef.current).selectAll('*').remove();

    const colorScale = d3.scaleSequential(d3.interpolateViridis)
      .domain([min, max]);

    const svg = d3.select(svgRef.current)
      .attr('width', width)
      .attr('height', 80);

    // 创建连续色条图例
    const legend = legendColor()
      .shapeWidth(width)
      .scale(colorScale)
      .orient('horizontal')
      .labelFormat(d3.format('.0f'));

    svg.append('g')
      .attr('transform', 'translate(0, 20)')
      .call(legend);
  }, [width, min, max]);

  return <svg ref={svgRef}></svg>;
};

export default D3ColorLegend;

两种方案都能实现你需要的效果，可根据需求选择。如果要自定义样式，直接修改D3属性或添加CSS类即可。

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