CODEWITHSUNDEEP
javascriptjqueryd3.js
Nick Anderson
Nick Anderson

Reputation: 138

D3 Multiple Force Directed Graphs

I can't multiple D3 force directed graphs to appear on one page, as they all pile into the same svg for whatever reason. I am out of ideas, and I have tried the top ideas online, which generally center around making sure you have a unique div to place each in, which I do.

I have divs with ids occurrences5, occurrences5...etc. So the loop should correctly find each div. The names of the JSON files are the same as the ids for each div.

var color = d3.scale.category20();

var occurences = ["occurrences3", "occurrences5", "occurrences10","occurrences20"];

for (var i = 0; i < occurences.length; i++) {
  var occurence = occurences[i];

  var svg = d3.select("#" + occurence).append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("id", "#" + occurence + "svg");

  d3.json(occurence + ".json", function(error, graph) {
    if (error) throw error;

    var force = d3.layout.force()
      .charge(-120)
      .linkDistance(30)
      .size([width, height]);

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

    var link = svg.selectAll(".link")
        .data(graph.links)
      .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", function(d) { return Math.sqrt(d.value); });

    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("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });

      node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
    });
  });
}})

enter image description here

Upvotes: 0

Views: 738

Answers (2)

Nick Anderson
Nick Anderson

Reputation: 138

If I separate the creation of each chart into their own function() blocks, it works. I got my answer from: D3 Dimple - How to show multiple dimple charts on same page?

However, you can separate into a function like so:

var occurences = ["occurrences3", "occurrences5", "occurrences10","occurrences20"];
occurences.forEach(function(entry) {
  draw(entry);
});
function draw(occurence) {...

Upvotes: 0

mgraham
mgraham

Reputation: 6207

You need to set svg within the callback function(error, graph) you pass to d3.json and not outside it

Reason: the callback function you pass to d3.json is called asynchronously i.e. it won't run nicely once per iteration as you're looping through the occurrences array. It appears all 4 callbacks are returning after that loop has finished and thus svg is set to the last value it had in that loop, thus everything's getting added to that svg element.

Upvotes: 1

Related Questions