I have a similar issue to this post. Unfortunately the solution there has not worked for me. How can I use d3.hexbin inside a react component? I've included it in the dependencies and installed it.

"dependencies": {
"d3": "^7.3.0",
"d3-hexbin": "^0.2.2"

}

I imported d3 originally just like this:

import * as d3 from 'd3';

Other than hexbin I can use most modules and was able to do scatter and bar charts so far. I am fairly new to this, and am sorry if I'm missing something obvious, please let me know. Thanks!

CodePudding user response：

If you're using Typescript, first make sure you have installed @types/d3-hexbin to your devDependencies.

Did you try:

import * as d3 from ‘d3-hexbin’

const hexbin = d3.hexbin

If you already have a d3 instance, you can rename the import like:

import * as d3Hexbin from 'd3-hexbin'

const {hexbin} = d3Hexbin

After importing the library, here is how to destructure and rename in one line:

const {hexbin: d3HB} = d3Hexbin

Here's a working sandbox