Javascript d3.js带固定布局的绘图网络
我目前正在研究由我的前任编写的批处理脚本的可视化结构,它只是简单地重复“从某处选择”和“插入到某处”。我尝试使用树函数,但当我希望将JSON的相同索引中的相同名称识别为相同节点时,使用树函数并没有那么灵活 所以我决定使用force布局功能,并在Google的帮助下几乎完成了。然而,虽然我可以在同一区域映射同一组数据库或脚本来初始化部件,但在某种程度上强制.on(“tick”),function()~~重新计算每个节点之间的距离,然后它变得非常混乱。但是如果没有它,它将不会显示节点之间的链接 有人知道如何在使用JSON重新计算链接时固定布局吗。 我的代码如下:Javascript d3.js带固定布局的绘图网络,javascript,json,d3.js,visualization,force-layout,Javascript,Json,D3.js,Visualization,Force Layout,我目前正在研究由我的前任编写的批处理脚本的可视化结构,它只是简单地重复“从某处选择”和“插入到某处”。我尝试使用树函数,但当我希望将JSON的相同索引中的相同名称识别为相同节点时,使用树函数并没有那么灵活 所以我决定使用force布局功能,并在Google的帮助下几乎完成了。然而,虽然我可以在同一区域映射同一组数据库或脚本来初始化部件,但在某种程度上强制.on(“tick”),function()~~重新计算每个节点之间的距离,然后它变得非常混乱。但是如果没有它,它将不会显示节点之间的链接 有人
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”事件函数,当节点移动到某个位置时,该函数会使节点固定。您可以查看静态以进行定向可视化
基本上,您可以创建一个力布局,为其指定节点和链接,然后启动它
然后运行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();
您必须在上述代码开始之前执行此操作
现在,您拥有了可以用于定位节点和链接的force对象。
现在直接将属性分配给节点和链接变量。(之前在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; });