javascript - Sigma JS节点动画

Question

我想在点击事件时移动 Sigma JS 中的节点。从位置 x 0.7 到位置 x -0.7。

是否可以在 Sigma js 中移动节点，如果可以，请指导我实现。

Answer 1

对的，这是可能的。我创建了一个 jsfiddle，显示如何在鼠标单击此处更改节点位置、大小和颜色：

• http://jsfiddle.net/kaliatech/P255K/

您可以像这样绑定到自定义“downnodes”事件：

sigInst.bind('downnodes',onNodeDown);

事件回调包含一个选定节点 ID 的数组。不知道什么时候点击的时候会不止一个。也许在复杂图形中缩小时。

使用 sigmajs 时更微妙的问题之一是大多数方法（例如 getNodes）返回克隆，而不是实例本身。我认为这是为了保护图中的“私有”数据，尤其是初始化后无法重绘的数据。要实际修改属性，您需要使用迭代器方法。即使那样，您也只会获得克隆。该库使用预定义的允许属性列表更新实际节点实例。（参见 graph.js 中的 checkNode 函数）。

设置属性后，您需要刷新/重绘图形。虽然“刷新”方法似乎是一个明显的候选者，但它并没有奏效。不过，我能够使用 draw 方法重新绘制它。您将需要查看源代码以了解不同的参数。例子：

function onNodeDown(evt) {
    var sigmajs = evt.target;
    var nodeId = evt.content[0];
    sigmajs.iterNodes(function(n){
      n.size = 10;
      n.color = "#0000FF";
    },[nodeId]);    

    sigmajs.draw(2, 2, 2, true);
};

对于更高级的需求，sigmajs 网站包含插件示例，展示了获取鼠标事件和动态更新节点的其他方式。一个是鱼眼效果的高级插件示例：

• http://sigmajs.org/examples/a_plugin_example_advanced.html

另一个是访问节点属性的示例：

• http://sigmajs.org/examples/more_node_info.html

sigmajs 文档很薄弱，因此您需要查看源代码才能理解。

Answer 2

有插件允许从图中移动孤立的节点。查看

https://github.com/Linkurious/linkurious.js/blob/develop/examples/lasso.html