如何在 D3.js 强制布局图中创建主节点的附属节点

Question

我正在尝试在强制布局下创建主图节点的附属节点。每个节点都应该有 一个或多个相应的卫星 节点附加到它。

这是一个显示意图的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");

卫星节点应该：

通过link以固定的较短距离连接到主节点。 link 距离应该是固定的。
受到来自其主节点（行星）的力的影响，不受其他因素的影响（如果 link 的距离始终固定，这应该不是问题）
当同一个行星节点存在多个卫星节点时，预计它们可以相互排斥，因此它们不会占据相同的位置。

我认为要实现这一点我必须：

将所有卫星节点视为同一数据集中的普通节点
强制卫星节点和行星节点之间 links 的 link 距离更短（或固定）<- 不确定如何在特定 links/nodes 上完成

Answer 1

这是我的发现：

1) 正常创建节点到卫星节点

2) 在节点之间创建Link[]数据时，定义一个属性 "type"并将其设置为"planet"用于行星和[=24之间的链接=] 用于卫星节点与其行星之间的链接

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

这强制行星到卫星的链接比其他链接更短

如何在 D3.js 强制布局图中创建主节点的附属节点

How to create satellite nodes to a main node in D3.js force layout graphs

d3.js

force-layout