svg - 向 Raphael SVG 对象添加力导向算法

Question

我正在使用 Raphael JS 构建用户界面。目前我有一个.js脚本，可以根据需要使用 Raphael JS 2.1 绘制所有内容。但是，由于绘图是由动态数据驱动的，因此对象很可能会重叠。将 d3.js 强制布局添加到对象会导致它们自动分散，因此各种 ux 组件不会重叠。但是，我无法将 d3.js 强制布局应用于 Raphael 绘制的 SVG 对象。

我在这里使用 JSFiddle 创建了一个基本示例。我使用d3.js 碰撞检测示例作为“模板”。

Answer 1

我已经修复了您的示例并将结果发布在http://jsfiddle.net/gn6tZ/6/。您的碰撞函数（- y而不是- r）中有一个小错字，当您想在强制布局运行后更新节点时，您需要为更新函数提供新数据。

var nodes = circleHolder.nodes();

force.on("tick", function(e){
  var q = d3.geom.quadtree( nodes ),
      i = 0,
      n = nodes.length;

  while( ++i < n ) {
    q.visit(collide( nodes[i]));
  }

  d3.selectAll('circle')
       .data(nodes)
       .attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; });

});

Answer 2

d3

示例之一：力有向图