d3.js绘制具有固定布局的网络

d3.js drawing network with immobilizing layouts

本文关键字：布局 网络 js 绘制 d3      更新时间：2023-09-26

我目前正在处理我的前任编写的批处理脚本的可视化结构，它只是从某个地方重复SELECT，然后插入到某个地方。我尝试使用树函数，但当我希望JSON的同一索引中的同一名称被识别为同一节点时，使用它就不那么灵活了。

所以我决定使用强制布局功能，并在谷歌的帮助下几乎完成了。然而，虽然我可以在同一区域映射同一组数据库或脚本来初始化零件，但不知何故，我强制（"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)"; }); });
          });

如果添加像function(d){ d.fixed = true }这样的函数，并在一个刻度期间（或者可能只是在第一个刻度期间）在每个节点上调用该函数，那么您将获得一个静态图。否则，您可以在代码运行后（或在第一次勾选期间）调用force.stop()，它也会完成同样的操作。

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

您可以查看用于定向可视化的静态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();

您必须在上述代码开始之前完成此操作。

现在，您有了可以用来定位节点和链接的力对象。现在直接将属性指定给节点和链接变量。（以前在勾选功能内完成）

您的代码现在将是这样的。

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; });
相关文章：