D3多重力有向图

我不能多重D3强制有向图出现在一个页面上，因为无论出于何种原因它们都堆积成相同的SVG。我没有想法，而且我已经尝试了在线的顶级创意，一般都以确保您有独特的div来放置每个创意，我都这样做。D3多重力有向图

我有div的ID occurrences5，occurrences5 ...等。所以循环应该正确地找到每个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; }); 
    }); 
    }); 
}})

来源

2016-01-25 Nick Anderson

我不认为这是你的问题的原因，但你不应该在你的id中包含＃符号：'.attr（“id”，“＃”+ occurence +“svg”）;'应该是'.attr（“id”，发生+“svg”）;'。哈希符号在css选择器中用于通过其id找到元素。 – Kelvin

非常好的一点！这是一个美妙的时刻。 –

您需要在回调函数中设置SVG（错误，图表）传递给d3.json和不在它之外

原因：传递给d3.json的回调函数是异步调用的，也就是说，在循环遍历数组时，每次迭代都不会很好地运行。看起来所有4个回调都在循环完成后返回，因此svg被设置为该循环中的最后一个值，因此所有内容都被添加到该svg元素中。

来源

2016-01-25 15:18:17 mgraham

如果我每个图的创建放在各自的功能（）块，它的工作原理。我有我的回答：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) {...

来源

2016-01-25 15:14:18

D3多重力有向图

回答

相关问题