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

【问题标题】：adding force directed algorithm to Raphael SVG objects向 Raphael SVG 对象添加力导向算法
【发布时间】：2012-04-18 07:59:21
【问题描述】：

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

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

【问题讨论】：

标签： svg raphael d3.js

【解决方案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; });

});

【讨论】：

知道如何调整此示例以在形状组之间创建强制布局吗？假设一个组由一个矩形和一个文本形状组成。

【解决方案2】：

其中一个例子：Force-Directed Graph

【讨论】：

根据我对 Raphael 的了解以及我在该示例中看到的情况，我不知道如何调整我必须与 d3 一起工作的内容。你能指出我正确的方向吗？
您可以使用 Raphael 进行绘图，然后让 d3 从那里接管。不幸的是，我不擅长其中任何一个:(。你是否仅限于使用 Raphael？
我已经编写了一个脚本，可以满足我的所有需求。此时我只想添加一个力导向算法，这样我的 Raphael 对象就不会重叠