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

卫星节点应该：

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

我想要实现这一目标我必须：

将所有卫星节点视为同一数据集中的正常节点
强制卫星节点和行星节点之间链路的链路距离更短（或固定）＆lt; - 不确定如何在特定链路/节点上完成此操作

Answer 1

这是我的发现：

1）正常地创建节点到卫星节点

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

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中为主节点创建卫星节点强制布局图

1 个答案: