javascript - D3 集群部队布局中的淡入淡出/突出显示

Question

我正在研究this D3 force layout with clusters example :

我想在鼠标悬停在节点上时仅突出显示当前群集的节点(其他群集应淡入不透明度 0.1)。

你的方法是什么？

Answer 1

我首先编写这个函数是为了比较两个节点的集群:

function isSameCluster(a, b) {
     return a.cluster == b.cluster;
};

然后，使用上面函数的 fade() 函数:(它应该针对参数“opacity”的任何值进行调用)

function fade(opacity) {
    return function(d) {
        node.style("stroke-opacity", function(o) {
                thisOpacity = isSameCluster(d, o) ? 1 : opacity;
                this.setAttribute('fill-opacity', thisOpacity);
                return thisOpacity;
            });
    };
};

之后，这就是我链接鼠标悬停和函数 fade() 的方式:

.on("mouseover", fade(.1))
.on("mouseout", fade(1));

结果是this :