How to customise the Force-Directed Graph example?

Question

As soon as I try to modify the json file from the Force-Directed Graph Example it gives me the following error:

Uncaught TypeError: Cannot read property 'nodes' of undefined

SyntaxError: Unexpected token

Code:

<!DOCTYPE html>
<meta charset="UTF8">
<style>
  .node {
    stroke: #fff;
    stroke-width: 1.5px;
  }
  .link {
    fill: none;
    stroke: #bbb;
  }
</style>

<body>

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <script>
    var width = window.innerWidth,
      height = window.innerHeight;

    var color = d3.scale.category20();

    var force = d3.layout.force()
      .linkDistance(10)
      .linkStrength(2)
      .size([width, height]);

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    d3.json("xPata.json", function(error, graph) {
      var nodes = graph.nodes.slice(),
        links = [],
        bilinks = [];

      graph.links.forEach(function(link) {
        var s = nodes[link.source],
          t = nodes[link.target],
          i = {}; // intermediate node
        nodes.push(i);
        links.push({
          source: s,
          target: i
        }, {
          source: i,
          target: t
        });
        bilinks.push([s, i, t]);
      });

      force
        .nodes(nodes)
        .links(links)
        .start();

      var link = svg.selectAll(".link")
        .data(bilinks)
        .enter().append("path")
        .attr("class", "link");

      var node = svg.selectAll(".node")
        .data(graph.nodes)
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", 5)
        .style("fill", function(d) {
          return color(d.group);
        })
        .call(force.drag);

      node.append("title")
        .text(function(d) {
          return d.name;
        });

      force.on("tick", function() {
        link.attr("d", function(d) {
          return "M" + d[0].x + "," + d[0].y + "S" + d[1].x + "," + d[1].y + " " + d[2].x + "," + d[2].y;
        });
        node.attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        });
      });
    });
  </script>
</body>

</html>

JSON:

{
  "nodes":[
    {"name":"Myriel","group":1},
    {"name":"Napoleon","group":1},
    {"name":"Mlle.Baptistine","group":1},
    {"name":"Mme.Magloire","group":1},
    {"name":"CountessdeLo","group":1},
    {"name":"Geborand","group":1},
    {"name":"Geborand","group":1}
  ],
  "links":[
    {"source":1,"target":0,"value":8},
    {"source":2,"target":0,"value":8},
    {"source":3,"target":0,"value":10},
    {"source":4,"target":3,"value":10},
    {"source":5,"target":3,"value":10},
    {"source":6,"target":2,"value":10},
    {"source":7,"target":5,"value":10}
  ]
}

When I rename the json file it loads just fine. What is going on? Happens on other examples as well.

Answer 1

Turns out it had nothing to do with D3.js. My webserver was the cause of the problem; it cached the json file. Doesn't explain the error, but it does explain the rename fix.

How to customise the Force-Directed Graph example?

Question

1 answers

solution1
0 2015-04-21 12:44:07

How to customise the Force-Directed Graph example?

Question

1 answers

solution1 0 2015-04-21 12:44:07

solution1
0 2015-04-21 12:44:07