javascript - 界定 d3.js 力定向图

Question

我有一个太大的强制有向图，因此我试图限制它。

下面是一些海量的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在这里绑定(bind)我的图表并相应地修改了 function ticked()

    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 中的不一样看起来很笨拙。

那是因为图表太大了吗？有没有办法让这张图看起来更有条理？

更新:

 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

Answer 1

您可以通过修改链接 distance 和 strength 来收紧节点。默认距离值为 30，默认强度基于链接的 source 或 target 连接到的节点数 (source) .

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