綁定的d3.js的力量有向圖

我有一個強制有向圖，太大了，因此我試圖綁定它。綁定的d3.js的力量有向圖

下面是一些大規模JSON數據

var IDData = JSON.stringify([ 
    ["1000000000039214051", "1000000000336563307", "Customer", "Customer", "2016-06-21 01:32:42", "2016-06-21 02:39:45", 155.4492950439453, 5], 
    ["1000000000039214051", "10000000682705", "Customer", "Agent", "2016-08-16 23:12:24", "2016-08-17 05:08:22", 171.84144592285156, 4], 
    ["04144221227", "1000000000060220197", "Phone", "Customer", "2016-01-04 03:41:13", "2016-01-05 01:54:03", 264.75457763671875, 5], 
    ["10000000490503", "1000000000060220197", "Agent", "Customer", "2016-10-21 03:39:50", "2016-10-21 06:59:41", 26.845823287963867, 5], 
    ["1000000000218556629", "600169462257", "Customer", "Phone", "2016-10-05 21:51:01", "2016-10-06 02:41:32", 76.26348876953125, 5], 
    ["10000000486511", "2000000000212907929", "Agent", "Customer", "2016-11-13 23:33:38", "2016-11-14 01:30:13", 114.56245422363281, 4], 
    ["CHB445789", "1000000000313013892", "ID_Card", "Customer", "2016-01-04 01:50:38", "2016-01-04 08:12:44", 457.4786071777344, 5], 
    ["10000000499929", "2000000000144964466", "Agent", "Customer", "2016-09-01 05:01:45", "2016-09-04 03:44:10", 121.28453826904297, 2], 
    ["2000000000180876855", "2000000000249424289", "Customer", "Customer", "2016-05-23 05:03:58", "2016-05-23 08:35:11", 218.06622314453125, 2], 
    ["1000000000039214051", "10000000682705", "Customer", "Agent", "2016-10-19 04:46:56", "2016-10-19 09:50:15", 121.29517364501953, 4], 
    ["CHB1737642", "2000000000144964466", "ID_Card", "Customer", "2016-10-11 04:50:40", "2016-10-11 07:58:43", 122.11398315429688, 1], 
    ["10000000499929", "2000000000144964466", "Agent", "Customer", "2016-09-05 07:18:05", "2016-09-06 07:38:54", 197.2952880859375, 2], 
    ["CHB1737642", "2000000000144964466", "ID_Card", "Customer", "2016-09-05 07:18:05", "2016-09-06 07:38:54", 197.2952880859375, 1], 
    ["10000000491948", "4000000000005319752", "Agent", "Customer", "2016-10-01 04:25:43", "2016-10-03 02:16:23", 319.45477294921875, 6], 
    ["1000000000039214051", "2000000000297175542", "Customer", "Customer", "2016-06-23 04:56:12", "2016-06-24 04:38:43", 25.19025421142578, 5], 
    ["2000000000180876855", "10000000682705", "Customer", "Agent", "2016-08-10 00:36:05", "2016-08-11 08:55:59", 207.31932067871094, 3], 
    ["2000000000180876855", "G9250991", "Customer", "ID_Card", "2016-09-08 02:35:18", "2016-09-08 04:37:55", 152.80625915527344, 3],....])

我想在這裏用這個example來約束我的圖表，並修改了功能打勾（）相應

var width = 960, 
    height = 500, 
    radius = 6; 
    function ticked() { 
    node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); }) 
     .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); }); 

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

該圖確實有界，但與example中的圖不一樣，看起來很笨拙。

那是因爲圖表太大了嗎？有沒有辦法讓這張圖看起來更加有組織？

UPDATE：

var simulation = d3.forceSimulation() 
.force("link", d3.forceLink().id(function(d) { 
    return d.id; 
})).distance(5).strength(1) 
.force("charge", d3.forceManyBody()) 
.force("center", d3.forceCenter(width/2, height/2));

這種失敗：

Uncaught TypeError: d3.forceSimulation(...).force(...).distance is not a function 
at makeGraph ((index):934) 
at window.onload ((index):1217)

還在摸索中d3.js. 這是fiddle

來源

2016-12-29 optimus_prime

您可以通過修改鏈接distance和strength來收緊節點。默認距離值爲30，默認強度基於鏈接連接到（source）的source或target的節點數。

d3.forceLink().id(function(d) { 
    return d.id; 
}).distance(5).strength(1)

來源

2016-12-29 20:55:34

這段代碼究竟應該放在哪裏？ –

將它追加到'forceLink'鏈中：'var simulation = d3.forceSimulation（）。force（「link」，d3.forceLink（））' –

所以我試過了，失敗了。更新了上面的帖子。沒有確定距離。 –

綁定的d3.js的力量有向圖

回答

相關問題