d3.js Question about the Modifying a Force Layout Example

[Ajantzen1122]

Hi,

I'm creating a force layout like the example given here: https://bl.ocks.org/mbostock/1095795

When setting up the nodes and links, Bostock creates variables like this:

  var a = {id: "a"}, b = {id: "b"}, c = {id: "c"};
  nodes.push(a, b, c);
  links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c});

The graph turns out beautifully here. However, when entering the nodes and links directly like this:

  nodes.push({id: "a"}, {id: "b"}, {id: "c"});
  links.push({source: {id: "a"}, target: {id: "b"}}, {source: {id: "b"}, target: {id: "c"}}, {source: {id: "c"}, target: {id: "a"}});

The script fails miserably. The error "Uncaught TypeError: Cannot call method 'push' of undefined” is received, and it appears that some of the parameters for each node aren't getting properly set because the nodes/links all bunch up in the top left corner of the page.

What I want to know is why this occurs, and how I can make the second lines of code work properly.

See the setTimeout() function in the JSFiddle for full example: https://jsfiddle.net/2m2pb1w6/5/

Best regards,
Anthony