Unable to read the force property undefined (simple network diagram D3)

Question

I am new to D3 and Javascript, but I was usually lucky with just copying the main D3 scripts and getting my data in the proper format for visualization. I tried several D3 network graphs and got the same error for everyone when I view the page.

Uncaught TypeError: Unable to read the 'force' property from undefined.

If you look at the script here: http://bl.ocks.org/jose187/4733747 I just copied it completely along with the corresponding .json file and got the above error. D3.layout.force () seems to be an “anonymous function”. Any ideas what is going on? Or how to fix it? Thank!

Answer 1

The d3.layout.force power layout has been renamed d3.forceSimulation in D3 V4 among many other changes.

Refer to this link for more information: D3 V4 Force

Answer 2

I also ran into this problem. The problem was in the d3 version that I used, which is version 4. When I use d3 version 3, it works correctly.

Answer 3

, , , //d3js.org/d3.v3.js

Answer 4

You will need to downgrade D3, since version 3 is d3.layout.forcenow d3.layout.forceSimulationin version 4, as already mentioned.

Use this CDN for D3 version 3:

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