javascript - 具有固定布局的 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 } 这样的函数，并在每个节点上调用它(或者可能只是在第一个 tick 期间)，那么你将拥有静态图。否则你可以在你的代码运行后调用 force.stop() (或者在第一次 tick 期间)，它会完成同样的事情。

我遇到的问题是，在我的代码块末尾调用 force.stop() 会导致图形在它正确地位于 SVG 中心之前卡住，并且因为我'关注静态图我制作了一个'mousedown'事件函数，使节点在移动到某个位置时固定。