Question

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

我使用JSFiddle here创建了一个基本示例。我使用d3.js collision detection example作为“模板”。

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

其中一个例子：Force-Directed Graph

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

2 个答案: