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

【问题标题】：How to create satellite nodes to a main node in D3.js force layout graphs如何在 D3.js 强制布局图中为主节点创建卫星节点
【发布时间】：2015-11-22 15:37:52
【问题描述】：

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

这是一个显示意图的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( function (d) { return (d.type == "SATELLITE" ? "10" : 120 ) })

标签： d3.js force-layout

【解决方案1】：

这是我的发现：

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

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

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

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

【讨论】：