can't use d3-hexgrid with d3.select()

[Yviflex]

Hello i am having trouble using d3-hexgrid because i get a message "d3.select is not a function" when i try to use it. I am using this version of d3:

<script src="https://d3js.org/d3.v7.min.js"></script>

and when i put it like this:

<script src="https://d3js.org/d3.v7.min.js"></script> <script src="https://unpkg.com/d3-hexgrid"></script>

i get this error:

Uncaught TypeError: d3.select is not a function
at index_a.html:40:24

because of this line:
const svg = d3.select("#map");

Can you help?

[larsvers]

Bug : d3-hexgrid overwrites the global d3 object

Package	d3-hexgrid
Version	current build on UNPKG (UMD bundle)
Environment	Browser, scripts loaded via <script> tags

---

Steps to reproduce

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/d3-hexgrid"></script>
<script>
  console.log(d3.select);   // ⬅︎ ❌  undefined
</script>

1. Load core D3 first.
2. Load d3-hexgrid afterwards.
3. Call any core-D3 API (e.g. d3.select).

---

Expected behaviour

d3.select, d3.scale*, etc. stay available, with d3.hexgrid added.

Actual behaviour

window.d3 is replaced by the plug-in’s export object; core methods are lost →
Uncaught TypeError: d3.select is not a function.

---

Root cause

The published UMD bundle is built with

output: {
  format: "umd",
  name: "d3"   // ⚠️  creates / replaces global `d3`
}

When executed in a browser, the factory runs roughly:

factory(global.d3 = global.d3 || {}, global.d3);

which re-assigns window.d3, clobbering anything that was there before.

---

Fix

Re-build the UMD bundle so it extends the existing global instead of replacing it.

export default {
  input: "src/index.js",
  external: ["d3"],
  output: {
    file: "dist/d3-hexgrid.js",
    format: "umd",
    name: "d3",
    extend: true            // ✅  mutate existing global
  }
};

---

Work-arounds

• Load d3-hexgrid before core D3 (reverses the clobbering order), or

• Import as ES modules and merge manually:

  <script type="module">
    import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7";
    import { hexgrid } from "https://unpkg.com/d3-hexgrid/dist/d3-hexgrid.esm.js";
    d3.hexgrid = hexgrid;
  </script>

---

Impact

Any project that includes both scripts via <script> tags and loads core D3 first will break.
Re-publishing with the extend/nested-library change removes the load-order dependency and restores full API compatibility.

[larsvers]

Thanks @Yviflex! This can be fixed with a rollup config update (see full bug report above) but for now you can simply script-load d3-hexgrid before d3 .

So in your case you can do:

<script src="https://unpkg.com/d3-hexgrid"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>