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

debugcn 发表于 Dev

格特拉

我正在尝试在力布局下创建到主要图节点的卫星节点。每个节点都应附有一个或多个相应的卫星节点。

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

卫星节点应：

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

我认为要实现这一目标，我必须：

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

格特拉

这是我的发现：

1）正常创建卫星节点的节点

2）在节点之间创建Link []数据时，请定义属性“类型”，并将其设置为“行星”以表示行星之间的链接，将其设置为“ 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);

这迫使行星到卫星的链接比其他链接短

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。