1

我用jsNetworkx绘制了一个图表，它是 Networkx 的 JavaScript版本。该端口还没有完全具备 Networkx 的所有功能。

我的工作：http: //jsfiddle.net/mrcactu5/VGpRJ/4/

我希望能够突出显示一个节点及其邻居mouseover并将它们的颜色更改为#FEFEFE.

4

1 回答 1

3

我计划将来更容易将事件处理程序添加到可视化中，但现在，您必须使用 D3 自己实现这些事情。

基本思想如下：根据节点名称为每个 SVG 节点元素分配一个唯一的 ID。然后，在鼠标悬停（与 D3 绑定）上，获取节点的所有邻居并使用名称查找相应的 SVG 元素并更改它们的样式。

例子：

jsnx.draw(G3, {
    // ...
    node_attr: {
        r: 8,
        title: function(d) { return d.label;},
        id: function(d) {
            return 'node-' + d.node; // assign unique ID
        }
    }
    // ...
}, true);

// helper method to find and style SVG node elements
function highlight_nodes(nodes, on) {
    nodes.forEach(function(n) {
        d3.select('#node-' + n).style('fill', function(d) {
            return on ? '#EEE' : d.data.color;
        });
    });
}

// bind event handlers
d3.selectAll('.node').on('mouseover', function(d) {
    highlight_nodes(d.G.neighbors(d.node).concat(d.node), true);
});

d3.selectAll('.node').on('mouseout', function(d) {
    highlight_nodes(d.G.neighbors(d.node).concat(d.node), false);
});

演示

于 2013-04-16T23:15:27.403 回答