Question

我无法在一个页面上显示多个D3力导向图，因为无论出于何种原因，它们都会堆叠在同一个svg中。我没有想法，我已经尝试了在线的顶级创意，这通常围绕确保你有一个独特的div来放置每个，我做。

我有ids occurrences5，occurrences5等等的div。所以循环应该正确找到每个div。 JSON文件的名称与每个div的ID相同。

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; });
    });
  });
}})

Answer 1

你需要在你传递给d3.json但不在它之外的回调函数（错误，图形）中设置svg

原因：您传递给d3.json的回调函数是异步调用的，即当您循环遍历eventss数组时，每次迭代它将无法正常运行一次。在循环结束后，似乎所有4个回调都返回，因此svg被设置为它在该循环中的最后一个值，因此所有内容都被添加到该svg元素中。

Answer 2

如果我将每个图表的创建分成他们自己的function（）块，它就可以了。我得到了答案：D3 Dimple - How to show multiple dimple charts on same page?

但是，您可以将其分成如下函数：

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

D3多力导向图

2 个答案: