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多重力有向圖

回答

相關問題