Javascript jsnetworkx更改节点颜色,访问邻居
我画了一个图形,它是的JavaScript版本。这个端口还没有完全具备Networkx的所有功能 我的工作:Javascript jsnetworkx更改节点颜色,访问邻居,javascript,jsnetworkx,Javascript,Jsnetworkx,我画了一个图形,它是的JavaScript版本。这个端口还没有完全具备Networkx的所有功能 我的工作: 我希望能够在鼠标悬停时突出显示节点及其邻居,并将其颜色更改为#FEFEFE我计划在将来更容易将事件处理程序添加到可视化中,但现在,您必须自己用D3实现这些功能 基本思想如下:根据节点名称为每个SVG节点元素分配一个唯一的ID。然后,在mouseover上(使用D3绑定),获取节点的所有邻居,并使用名称查找相应的SVG元素并更改其样式 例如: jsnx.draw(G3, { //
我希望能够在鼠标悬停时突出显示节点及其邻居,并将其颜色更改为
#FEFEFE
我计划在将来更容易将事件处理程序添加到可视化中,但现在,您必须自己用D3实现这些功能
基本思想如下:根据节点名称为每个SVG节点元素分配一个唯一的ID。然后,在mouseover上(使用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);
});