javascript - Sigma JS 节点动画

Question

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

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

Answer 1

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

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

您可以像这样绑定(bind)到自定义“downnodes”事件:

sigInst.bind('downnodes',onNodeDown);

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

使用 sigmajs 时的一个更微妙的问题是，大多数方法(例如 getNodes)返回克隆，而不是实例本身。我认为这是为了保护图中的“私有(private)”数据，尤其是初始化后无法重绘的数据。要实际修改属性，您需要使用迭代器方法。即使那样，您也只能获得克隆。该库使用预定义的允许属性列表更新实际节点实例。 (请参阅 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 文档薄弱，因此您需要 review the source code了解事物。