如何访问导入的React组件HexbinSeries的内部变量设置图例参数

方案一：预计算hexbin结果（最稳妥，符合React数据流规范） #

你担心的重复计算问题完全可以通过React的useMemo缓存能力解决，仅当依赖项变化时才会重新计算，全程仅执行一次计算逻辑：

1. 安装d3-hexbin依赖（react-vis内部也是用这个库计算，参数完全对齐）
2. 预计算hexbin结果，你需要的计数可以直接从结果中获取，原有组件逻辑不需要做额外调整
   示例代码：

import React, {useEffect, useMemo} from 'react';
import {XYPlot, XAxis, YAxis, HexbinSeries} from 'react-vis';
import * as d3Hexbin from 'd3-hexbin';

export const EasyPlot = () => {
  const DATA = [
    {"eruptions": 3.6, "waiting": 79},
    {"eruptions": 3.6, "waiting": 79},
    {"eruptions": 3.6, "waiting": 79},
    {"eruptions": 1.8, "waiting": 54},
    {"eruptions": 4.533, "waiting": 85}
  ];
  const radius = 10;
  const getX = d => d.waiting;
  const getY = d => d.eruptions;

  // 缓存hexbin计算结果，仅当依赖变化时才重新计算
  const hexbinData = useMemo(() => {
    const hexbin = d3Hexbin.hexbin()
      .x(getX)
      .y(getY)
      .radius(radius);
    return hexbin(DATA);
  }, [DATA, radius, getX, getY]);

  useEffect(() => {
    // hexbinData每个元素的length属性就是当前六边形对应的点计数
    const binCounts = hexbinData.map(bin => bin.length);
    console.log('所有六边形的计数：', binCounts);
  }, [hexbinData])

  return (
    <div>
      <XYPlot
        width={400}
        getX={getX}
        getY={getY}
        height={400}
      >
        <HexbinSeries
          colorRange={['orange', 'cyan']}
          radius={radius}
          data={DATA}
        />
        <XAxis />
        <YAxis />
      </XYPlot>
    </div>
  );
};

方案二：通过ref访问组件内部属性（无需额外依赖，适合快速实现） #

react-vis的系列组件均为类组件，你可以直接挂载ref获取组件实例，从实例的内部属性中直接拿到计算好的hexbin结果：

import React, {useEffect, useRef} from 'react';
import {XYPlot, XAxis, YAxis, HexbinSeries} from 'react-vis'

export const EasyPlot = () => {
  const hexbinRef = useRef(null);
  const DATA = [
    {"eruptions": 3.6, "waiting": 79},
    {"eruptions": 3.6, "waiting": 79},
    {"eruptions": 3.6, "waiting": 79},
    {"eruptions": 1.8, "waiting": 54},
    {"eruptions": 4.533, "waiting": 85}
  ];

  useEffect(() => {
    if(!hexbinRef.current) return;
    // 不同版本react-vis的内部属性名可能有差异，可先打印hexbinRef.current实例确认属性名
    const processedBins = hexbinRef.current._bins;
    const binCounts = processedBins.map(bin => bin.length);
    console.log('从组件内部拿到的计数：', binCounts);
  }, [])

  return (
    <div>
      <XYPlot
        width={400}
        getX={d => d.waiting}
        getY={d => d.eruptions}
        height={400}
      >
        <HexbinSeries
          ref={hexbinRef}
          colorRange={['orange', 'cyan']}
          radius={10}
          data={DATA}
        />
        <XAxis />
        <YAxis />
      </XYPlot>
    </div>
  );
};

注：方案二依赖react-vis的内部实现，由于该库已经停止维护，固定版本使用不会有兼容性问题。

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