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'事件函数，当节点移动到某个位置时，它会使节点固定。

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

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

2 个答案: