d3.js绘制网络与固定布局

Question

我目前正致力于可视化由我的前任编写的批处理脚本的结构,它只是从某处重复SELECT并且INSERT到某个地方.我尝试使用树函数,但是当我希望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()（或者同样在第一个刻度期间），它将完成相同的任务。

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