Javascript 如何将CSS属性添加到sigma.js(画布渲染器)上的选定节点
我创建了一个函数,当我单击一个节点时,它会使所有非相邻节点透明*。现在,我想使相同的节点对鼠标事件不响应,同时保持可见节点响应。 一个选项是将css属性Javascript 如何将CSS属性添加到sigma.js(画布渲染器)上的选定节点,javascript,canvas,sigma.js,Javascript,Canvas,Sigma.js,我创建了一个函数,当我单击一个节点时,它会使所有非相邻节点透明*。现在,我想使相同的节点对鼠标事件不响应,同时保持可见节点响应。 一个选项是将css属性指针事件:none分配给透明节点。我能用sigma做这个吗 *为此,我指定了一个不透明度为0的rgba颜色。因此,我必须使用画布渲染器,因为WebGL不支持透明度 我的代码: function highlight () { var s = sigma.instances()[0]; var nodes = s.graph.nodes(); va
指针事件:none
分配给透明节点。我能用sigma做这个吗
*为此,我指定了一个不透明度为0的rgba颜色。因此,我必须使用画布渲染器,因为WebGL不支持透明度
我的代码:
function highlight () {
var s = sigma.instances()[0];
var nodes = s.graph.nodes();
var edges = s.graph.edges();
var maxCollab = d3.max(edges, function(d) { return d.collaborations; });
// We first need to save the original colors of our
// nodes and edges, like this:
nodes.forEach(function(n) {
n.originalColor = n.color;
});
edges.forEach(function(e) {
e.originalColor = e.color;
});
// When a node is clicked, we check for each node
// if it is a neighbor of the clicked one. If not,
// we set its color as grey, and else, it takes its
// original color.
// We do the same for the edges, and we only keep
// edges that have both extremities colored.
s.bind('clickNode', function(e) {
var nodeId = e.data.node.id,
toKeep = s.graph.neighbors(nodeId);
toKeep[nodeId] = e.data.node;
nodes.forEach(function(n) {
if (toKeep[n.id])
n.color = n.originalColor;
else
n.color = 'rgba(0,0,0,0)';
});
edges.forEach(function(e) {
if (toKeep[e.source] && toKeep[e.target]) {
e.color = e.originalColor;
}
else
e.color = 'rgba(0,0,0,0)';
});
// Since the data has been modified, we need to
// call the refresh method to make the colors
// update effective.
s.refresh();
});
// When the stage is clicked, we just color each
// node and edge with its original color.
s.bind('clickStage', function(e) {
nodes.forEach(function(n) {
n.color = n.originalColor;
});
edges.forEach(function(e) {
e.color = e.originalColor;
});
s.refresh();
});
}
是否只想隐藏节点?如果是这样,可以将节点的隐藏属性设置为true。这样它们就不再可见,西格玛也不会为它们触发任何事件 您只需在节点上添加一个标志,表示对
clickNode
事件没有响应
//摘自'clickNode'处理程序
nodes.forEach(函数(n){
如果(托克普[n.id]){
n、 颜色=原色;
n、 clickable=false;//是设置node.hidden=true
确实适用于我的情况!但是,我仍然认为能够通过事件更改css属性会很有用。这里的问题是,您不能将css类分配给由画布或webgl渲染器渲染的sigma.js元素,因为它们根本不是一部分我认为您必须为此使用svg渲染器。