Javascript 在D3强制布局中,如何根据选择标准在对称同心圆中排列数百个节点?
我对D3还很陌生,我使用的是力方向布局,目前有大约1000个节点。现在的可视化显示如下所示: 在上面的网络中,页面中心的红色节点是根节点,实心黄色节点是级别1节点,其中包含饼图切片的黄色节点是级别2节点。我有一个属性附加到每个节点,“类别”在哪里Javascript 在D3强制布局中,如何根据选择标准在对称同心圆中排列数百个节点?,javascript,d3.js,force-layout,Javascript,D3.js,Force Layout,我对D3还很陌生,我使用的是力方向布局,目前有大约1000个节点。现在的可视化显示如下所示: 在上面的网络中,页面中心的红色节点是根节点,实心黄色节点是级别1节点,其中包含饼图切片的黄色节点是级别2节点。我有一个属性附加到每个节点,“类别”在哪里 category = 1: root node category = 2: level 1 node category = 3: level 2 node 我无法以根节点位于中心、1级节点整齐排列在根节点周围、2级节点排列在最外面的圆的方式操纵电荷
category = 1: root node
category = 2: level 1 node
category = 3: level 2 node
我无法以根节点位于中心、1级节点整齐排列在根节点周围、2级节点排列在最外面的圆的方式操纵电荷/链路距离/摩擦力。这是我目前正在使用的创建和调整力的代码段:
var zoom = d3.behavior.zoom()
.scaleExtent([-1, 10])
.on("zoom", zoomed);
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
var force = d3.layout.force() // charge is for inter-node repel, link distance is node-node distance
.charge(function(d){ //originally charge was just -150 and there was no function
var charge = -150;
if (d.index === 0)
charge = 20 * charge;
return charge;})
.gravity(-0.01)
.linkDistance(function(d){ //originally charge was just 150 and there was no function
var linkDist = 150;
if (d.category == 2)
linkDist = 2 * linkDist;
else if(d.category == 3)
linkDist = 4 * linkDist;
return linkDist;})
//.linkStrength(0.2)
.friction(0.9)
.nodes(nodes)
.links(links)
.size([w, h])
.start();
我希望这足以让我表达这个问题。在当前的代码中,我尝试使用电荷和链接距离,但它不起作用。如果需要,我可以进一步编写代码。请有人能帮助我实现所需的布局使用正确的d3和部队布局属性?谢谢
编辑:我当前使用的勾号函数如下所示(不确定是否必须调整此函数以手动定位节点):
与其尝试操纵力布局特性,不如直接设置位置。通过创建记号处理程序来实现这一点;在该处理程序中,将根节点的
x
和y
属性显式设置为中心,以此类推。。布局将根据这些约束来安排节点。但是如何确定一千个节点的精确坐标呢?我的意思是,只在中心(w/2,h/2)设置根是很容易的,但是什么样的算法会为其他节点设置精确的位置坐标呢?不要设置辅助节点的精确位置。让布局运行,但在记号处理程序中调整位置以满足您的要求。例如,如果希望次节点与中心保持固定距离,请使用布局计算的角度,但调整半径。这对我现在更有意义。你能不能添加一个带有几个节点的非常基本的代码来说明我是如何做到这一点的?那将是一个很大的帮助@StephenThomas我添加了一些代码,表示我已经在使用一个tick函数。不确定这是否有用,但请看一看。
force.on("tick", function() {
nodes[0].x = w / 2;
nodes[0].y = h / 2;
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 + ")"; });
});