向Raphael SVG对象添加强制引导算法 [英] adding force directed algorithm to Raphael SVG objects

问题描述

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

I am building a user interface using Raphael JS. currently I have a .js script that draws out everything using Raphael JS 2.1 exactly as needed. However, because the drawing is driven by dynamic data it is highly likely that objects will overlap. Adding the d3.js Force Layout to the objects would cause them to scatter automatically so there is no overlap of various ux components. However I have not been able to apply the d3.js Force Layout to Raphael drawn SVG objects.

我创建了一个使用JSFiddle的基本示例此处。我使用 d3.js碰撞检测示例作为模板。

I've created a basic example using JSFiddle here. I used the d3.js collision detection example as a "template".

推荐答案

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

I've fixed up your example and posted the result at http://jsfiddle.net/gn6tZ/6/. You had a minor typo in your collide function (- y instead of - r) and when you want to update the nodes after the force layout runs you need to supply the update function with the new data.

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; });

});

这篇关于向Raphael SVG对象添加强制引导算法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！