using d3-force-3d

[jorgens]

Sorry, for this probably stupid question, but you write that d3-force-3d can be used as a drop-in to replace d3-force. How would I go about using require to drop in d3-force-3d into the following code:

require.config({ paths: 
    { d3: "https://d3js.org/d3.v5.min" } });

require(["d3"], function (d3) {

...

    var simulation = d3.forceSimulation(graph.nodes)
        .force("link", d3.forceLink(graph.links).distance(20).strength(.6))
        .force("charge", d3.forceManyBody().strength(-400))
        .force('centerX', d3.forceX(width / 2))
        .force('centerY', d3.forceY(height / 2))
        .on("tick", ticked);
...
});

[vasturiano]

@jorgens thanks for reaching out. I haven't specifically tested d3-force-3d with requireJS, but if it can work with d3-force as a stand-alone module, than it should work seamlessly with d3-force-3d.

I can imagine just replacing the d3 bundle (if you are using it solely for d3-force), with d3-force-3d, something like:

require(['//unpkg.com/d3-force-3d'], function(d3) { ... })

If you're using the 3D mode of it, you may need to import the d3-octree module as well.

Let me know if you can get it working!

[jorgens]

@vasturiano sorry for the late reply and thanks for the pointers.

I ended up using ES6 and babel.js to get it working cleanly and handle the needed Micromodules. So now I just have something like:

import { forceSimulation, forceLink, forceManyBody, forceX, forceY, forceZ } from "../node_modules/d3-force-3d";
import { select, event } from "../node_modules/d3-selection"
import { drag } from "../node_modules/d3-drag"
import { zoom } from "../node_modules/d3-zoom"

...

let simulation = forceSimulation(graph.nodes)
    .force("link", forceLink(graph.links).distance(20).strength(.7))
    .force("charge", forceManyBody().strength(-400))
    .force('centerX', forceX(width / 2))
    .force('centerY', forceY(height / 2))
    .force('centerZ', forceZ(height / 2))
    .on("tick", ticked);

Thanks a lot for all your work!

[vasturiano]

Nice! Btw, quick tip, you don't need to specify node_modules in your imports. Just do import { ... } from 'd3-selection' should work. :)

[jorgens]

Thx, indeed it does! :)