JS / Webpack: an SVG graphic (map via D3.js) is not rendering when compiling via webpack (src included)

Question

I'm using Webpack to make a website that contains a custom map projection using D3. Even though the code checks out, the map itself doesn't render.

I've followed this tutorial and even copied the demo CodePen to the letter. Triple-checked all the code, and even asked Chat GPT to help debug. However, when I compile it, the map simply doesn't render, leaving me with a blank screen.

My best guess is that Webpack is doing some weird compilation/interference that's breaking D3, or something funky that's preventing SVG graphics from rendering. Inspecting it, D3 seems to be generating the SVG lines fine though.

• Here's the source repo
• canvas.js has most of the code
• index.js loads the CSS and calls canvas
• webpack.config.js for setting up webpack

Note that calling ShowDemoMap() in canvas.js DOES load+show an example map image, confirming that webpack is actually compiling. It's just not showing the D3 map.

Any help extremely appreciated, cheers

Answer 1

Figured it out! Almost certainly because I was mis-assigning an element while selecting D3 elements. The main issue line was:

var joined = d3.select('#container').select('g.map')

probably due to some issue with dynamically creating the hierarchy in JS. Eg, createElement for container, createElementNS for SVGs, etc. Not sure what the issue was exactly (if you want to see the broken code, it's here - kudos if you can point out what I messed up, as I'm still not 100% sure) but at least now it's fixed.

Instead of creating the elements via JS and then embedding D3 into them, I just let D3 create the elements directly. SVG rendering was probably working all along, just some hierarchy assignment put it in the wrong spot.

If anybody ever comes across this in the future... hope this helps <3