如何在D3.js强制布局图中创建卫星节点到主节点

我试图在强制布局下创建卫星节点到主图节点。每个节点应该有一个或多个相应的卫星节点连接到它。如何在D3.js强制布局图中创建卫星节点到主节点

这里是一个的jsfiddle表示意图（本实施例中具有固定的位置，并且没有力统治卫星节点

http://jsfiddle.net/guidoextras/zLt2sne3/1/

 node.append("circle") 
     .attr("class", "planet_node") 
     .attr("r", function(d) { return d.weight * 2 + 12; }) 
     .style("fill", function(d) { return color(1/d.rating); }); 


    node.append("circle") 
     .attr("r", 5) 
     .attr("class", "satellite_node") 
     .attr("cx", function(d) { return d.weight * 2 + 25; }) 
     .attr("cy", 0) 
     .style("stroke-width", "1") 
     .style("stroke", "black") 
     .style("fill", "cyan");

卫星节点应：

是通过一个固定的较短距离的链路连接到主节点上，链路的距离应该是固定的
受到来自其主要节点（行星）的力并且不会受到其他人的影响（如果链路的距离总是固定，这应该不是问题）
当同一行星节点存在更多卫星节点时，预计他们可以相互排斥，这样他们就不会在同一个位置出现问题。

我在想，要实现这一点，我必须：

考虑所有卫星节点在同一数据正常节点设置
执行卫星节点和行星节点之间的链接的linkdistance短（或固定）< - 不知道如何可以在特定的链接/节点

来源

2015-08-28 gextra

那么你的问题是什么？你有没有试过简单地将这些“卫星”节点添加到与其父节点连接的力布局？ –

我做到了，但让他们受到相同的力量规则的影响。我意识到我可以为武力增加一项功能，解决问题。：.linkDistance（function（d）{return（d.type ==“SATELLITE”？“10”：120）}） – gextra

这做的是我发现：

1）通常创建节点到卫星节点

2）创建节点之间的链路。]数据时，定义一个属性“类型”和将其设置为“行星”为行星和“卫星”的链接之间的链路一个卫星节点和它的行星之间

node[0] = {"name":"planet-1"} 
node[1] = {"name":"satellite-to-planet-1"} 
node[2] = {"name":"planet2"} 
node[3] = {"name":"planet3"} 

link[0] = {"source":0, "target":1, "type":"SATELLITE"} 
link[1] = {"source":2, "target":3, "type":"PLANET"}

3）设置的力布局属性如下：

this.force = d3.layout.force() 
    .nodes(this.nodes) 
    .links(this.links) 
    .charge(-400) 
    .linkDistance(function (d) { return (d.type == "SATELLITE" ? "10" : 120) }) 
    .size([this.w, this.h]) 
    .on("tick", tick);

这加强了行星至卫星链路比其他

短

来源

2015-08-28 05:19:31 gextra

如何在D3.js强制布局图中创建卫星节点到主节点

回答

相关问题