React组件中无法导入d3-tip与d3-hexbin的问题求助

嘿，我来帮你搞定React里d3-tip和d3-hexbin的导入问题！你遇到的错误主要是因为d3 v5之后，很多功能都从核心包拆分出来成独立模块了，而且导入和挂载方式需要调整，咱们一步步来解决：

第一步：修正导入路径错误 #

你编辑3里提到的Module not found: Can't resolve 'd3.hexbin'错误，是因为导入路径写错了。你的package.json里依赖的是d3-hexbin（短横线连接），不是d3.hexbin（点连接），所以先把导入语句改对：

// 错误写法
// import * as d3Hexbin from "d3.hexbin";

// 正确写法
import * as d3Hexbin from "d3-hexbin";

第二步：处理d3-hexbin的调用 #

d3 v5及以后，hexbin不再是d3核心包的一部分，所以不能直接用d3.hexbin()调用。你有两种方式解决：

方式1：将hexbin挂载到d3对象上（适配你原来的代码） #

把导入的hexbin模块挂载到d3对象后，就能继续用你原来的d3.hexbin()写法：

import * as d3 from "d3";
import * as d3Hexbin from "d3-hexbin";

// 在组件顶部或者构造函数里挂载
d3.hexbin = d3Hexbin.hexbin;

// 之后就能正常调用
var hexbin = d3.hexbin()
  .radius(1.5)
  .x(d => d.key[0])
  .y(d => d.key[1]);

方式2：直接使用导入的模块 #

如果不想挂载，也可以直接调用导入的d3Hexbin：

var hexbin = d3Hexbin.hexbin()
  .radius(1.5)
  .x(d => d.key[0])
  .y(d => d.key[1]);

第三步：处理d3-tip的调用 #

d3-tip同样需要手动挂载到d3对象上，而且要注意导入方式：

import * as d3 from "d3";
import d3Tip from "d3-tip";

// 挂载tip到d3对象
d3.tip = d3Tip;

// 之后就能正常创建tip
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-20,0])
  .html('work come on baby lets work for once for me');

另外，别忘了在SVG元素上激活tip，否则鼠标事件不会生效：

const svg = d3.select('#your-svg-id');
// 激活tip
tip(svg);

// 给图表元素绑定tip事件
svg.selectAll('.hexagon')
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);

第四步：添加d3-tip的样式 #

d3-tip需要对应的CSS才能正常显示，你可以在组件的render方法里内嵌样式，或者单独导入CSS文件：

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* 给tip加小箭头 */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

完整修正后的组件示例 #

import React, { Component } from 'react';
import * as d3 from "d3";
import d3Tip from "d3-tip";
import * as d3Hexbin from "d3-hexbin";

// 挂载hexbin和tip到d3对象
d3.hexbin = d3Hexbin.hexbin;
d3.tip = d3Tip;

class myD3Component extends Component {
  constructor(props) {
    super(props);
    // 初始化状态等代码
  }

  componentDidMount() {
    this.drawChart();
  }

  drawChart() {
    const svg = d3.select('#hexbin-svg');
    const width = 500;
    const height = 500;

    // 示例数据，替换成你的真实数据
    const data = Array.from({length: 100}, () => [
      Math.random() * width,
      Math.random() * height
    ]);

    // 创建hexbin
    const hexbin = d3.hexbin()
      .radius(1.5)
      .x(d => d[0])
      .y(d => d[1]);

    // 创建并激活tip
    const tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-20,0])
      .html(d => `数据点数量：${d.length}`);
    tip(svg);

    // 绘制六边形
    svg.selectAll('.hexagon')
      .data(hexbin(data))
      .enter()
      .append('path')
      .attr('class', 'hexagon')
      .attr('d', hexbin.hexagon())
      .attr('transform', d => `translate(${d.x},${d.y})`)
      .style('fill', '#69b3a2')
      .style('stroke', '#fff')
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);
  }

  render() {
    return (
      <div>
        <svg id="hexbin-svg" width={500} height={500}></svg>
        {/* 内嵌d3-tip样式 */}
        <style>{`
          .d3-tip {
            line-height: 1;
            font-weight: bold;
            padding: 12px;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            border-radius: 2px;
          }
          .d3-tip:after {
            box-sizing: border-box;
            display: inline;
            font-size: 10px;
            width: 100%;
            line-height: 1;
            color: rgba(0, 0, 0, 0.8);
            content: "\\25BC";
            position: absolute;
            text-align: center;
          }
          .d3-tip.n:after {
            margin: -1px 0 0 0;
            top: 100%;
            left: 0;
          }
        `}</style>
      </div>
    );
  }
}

export default myD3Component;

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