How to duplicate v3 force layout forces in v4

13 views
Skip to first unread message

Danny Gonzalez

unread,
Jun 21, 2018, 3:12:05 AM6/21/18
to d3-js
I have based a chart on the force layout chart by Mike Bostock here
I have updated the code to use d3.js v4, however whatever combination of forces (link, charge, centreX, centreY, collide) I can't duplicate the physics of the original v3 one.

Essentially what I would like is the v4 version of the following v3 version:

var force = d3.layout.force()
   
.linkDistance(80)
   
.charge(-120)
   
.gravity(.05)
   
.size([width, height])
   
.on("tick", tick);

I am currently using the following v4 version:

var force = d3.forceSimulation()

                .force('link',  d3.forceLink().id(d => d.id).distance(lineDistance))

                .force("charge", d3.forceManyBody().strength(-120))

                .force('centerX', d3.forceX(width / 2).strength(0.1))

                .force('centerY', d3.forceY(height / 2).strength(0.1))

                .force("collide", d3.forceCollide().radius(2).strength(5))

                .on("tick", ticked); 



Thanks for your help.

Reply all
Reply to author
Forward
0 new messages