d3.js使用固定布局绘制网络

Question

我目前正致力于可视化由我的前任编写的批处理脚本的结构，该处理只是简单地从某处重复SELECT并将其插入某处。我尝试使用树函数，但是当我想在同一个JSON索引中将相同名称识别为同一节点时，它使用起来并不灵活。

因此，我决定使用强制布局功能，并几乎完成了谷歌搜索的一些帮助。然而，尽管我可以将同一组数据库或脚本映射到同一区域来初始化零件，但以某种方式force.on（“tick”，function（）~~重新计算每个节点之间的距离，然后它变得非常混乱。但是没有这一点，它不会显示节点之间的链接

有谁知道如何固定的布局，同时链接使用JSON重新计算 我的代码是这样的：。

  node.append("circle") 
       .attr("cx", function(d) { return d.group*70; }) 
       .attr("cy", function(d) { return d.index*10; }) 
       .attr("r", 10) 
       .attr("fill", function(d) { 
        return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")"; 
       }); 

      node.append("text") 
       .attr("dx", function(d){return d.group*70;}) 
       .attr("dy", function(d){return d.index*10;}) 
       .text(function(d) { return d.name }); 
      force.on("tick", function() { 
       alert(debugPrint(this)); 
       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("transform", function(d) { 
        return "translate(" + d.x + "," + d.y + ")"; 
       }); 
       //node.attr("transform", function(d) { return "translate(0)"; }); }); 
      }); 

Answer 1

如果您添加一个像function(d){ d.fixed = true }这样的函数，并在每个节点上打勾（或者只是在第一次打勾期间），然后你将得到一个静态图，否则你可以在你的鳕鱼之后调用force.stop() e运行（或者在第一次滴答时也是如此），并且它将完成相同的操作。

我遇到的问题是，在代码块末尾调用force.stop()导致图形在SVG中心正确定位之前冻结，并且由于我不关心静态图形，所以我制作了一个图形'mousedown'事件功能，它在移动到某个位置时修复了一个节点。

Answer 2

你可以看一下静态用于定向可视化http://bl.ocks.org/mbostock/1667139

基本上，你创建一个力布局，分配节点和链接到它，然后启动它。

然后运行force.tick（）方法ticks次数。这将计算布局中每个节点的位置。您将不得不尝试使用ticks的值来获得良好的图表。该值应该与图中节点的数量成比例增加。

force = d3.layout.force(); 

ticks=2000; //number of ticks for calculating the force layout 

force 
    .nodes(nodes) //nodes = array of nodes 
    .links(links) //links = array of links 
    .start(); 

for (var i = ticks; i > 0; --i) force.tick(); 

force.stop(); 

您必须在上面的代码开始前执行此操作。

现在，您已经拥有了可用于定位节点和链接的强制对象。 现在直接指定节点和链接变量的属性（以前在tick函数中完成）

您的代码现在看起来像这样。

node.append("circle") 
    .attr("cx", function(d){return d.group*70; }) 
    .attr("cy", function(d){return d.index*10;}) 
    .attr("r", 10) 
    .attr("fill",function(d){ 
     return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")" 
    }) 
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

node.append("text") 
    .attr("dx", function(d){return d.group*70;}) 
    .attr("dy", function(d){return d.index*10;}) 
    .text(function(d) { return d.name }); 

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