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

Question

我正在使用Raphael JS构建用户界面.目前我有一个.js脚本,根据需要使用Raphael JS 2.1绘制所有内容.但是,由于绘图是由动态数据驱动的,因此对象很可能会重叠.将d3.js强制布局添加到对象将导致它们自动分散,因此各种ux组件没有重叠.但是我无法将d3.js Force Layout应用于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; });

});