javascript - 如何在 D3 v4 力图中仅让一些边对 `mouseover` 使用react

Question

我正在研究 this force graph在 D3 v4 中。

当用户点击节点时，只有与其相连的节点可见。此外，连接这些节点的边缘变得更粗，用户可以将鼠标悬停在上面，以便查看更多信息(右侧显示的工具提示)。

这就是我在点击后突出显示连接节点的方式

//Highlight on click
function highlighting () {
//Toggle stores whether the highlighting is on
var node = d3.selectAll('circle');
var link = d3.selectAll('line');
var toggle = 0;
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < dataset.nodes.length; i++) {
    linkedByIndex[i + "," + i] = 1;
};
d3.selectAll('line').each(function (d) {
    linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
    return linkedByIndex[a.index + "," + b.index];
}
function connectedNodes() {
    if (toggle == 0) {
        //Reduce the opacity of all but the neighbouring nodes
        d = d3.select(this).node().__data__;
        node.style("opacity", function (o) {
            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.0;
        });
        link.style("opacity", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? 1 : 0.0;
        });
        link.attr('stroke-width' , 4);
        toggle = 1;
        interactivityHighlight();

        //Change navigation div
        d3.select('#click01').classed('hidden', true);
        d3.select('#click02').classed('hidden', false);

    } else {
        //Put them back to starting opacity
        node.style("opacity", 1);
        link.style("opacity", function (d) {return edgeOpacityScale(d.collaborations);});
        link.attr('stroke-width', 1);
        link.attr('class', null);
        toggle = 0;
        //Change navigation
        d3.select('#click01').classed('hidden', false);
        d3.select('#click02').classed('hidden', true);
    }
}
node.on('click', connectedNodes);
}

这是我在点击后调用的函数

function interactivityHighlight () {
graph.selectAll('line').on('mouseover', function (d) {
    if (d3.select(this).style('opacity') == 1) {
        d3.select(this)
        .attr('stroke', 'red')
        .attr('stroke-width', 6);

        d3.select('#tooltip')
        .classed('hidden', false);

        d3.select('#tooltip')
        .append('p')
        .attr('id', 'org_names')
        .text('Collaborations between ' + d.source.name + ' and ' + d.target.name);

        d3.select('#tooltip')
        .append('p')
        .attr('id', 'collaborations')
        .text('Worked together on ' + d.collaborations + ' projects');

        d3.select('#tooltip')
        .append('p')
        .attr('id', 'collBudget')
        .text('Total budget: '+ commafy(d.collBudget));
}})

graph.selectAll('line').on('mouseout', function (d) {
    if (d3.select(this).style('opacity') == 1) {
        d3.select(this)
        .attr('stroke', 'black')
        .attr('stroke-width', 4);

        d3.select('#tooltip')
        .selectAll('p')
        .remove();

        d3.select('#tooltip')
        .classed('hidden', true);
}})
}

基本上所有未连接的节点都得到 opacity=0 并因此变得不可见。然而，它们仍然出现在图表上:悬停在一条线上可能不会触发 interactivityHighlight()，因为鼠标实际上悬停在一条不可见的边缘上。

有没有办法让不可见的边缘真正消失，或者让可见的边缘“位于”所有其他边缘之上？

Answer 1

添加一个包含此指针事件规则的 css 类，例如:

.hidden {
  pointer-events: none;
}

然后在链接上设置那个类

.classed("hidden", function(d) {
    /* return true/false, decide using the same logic you use for opacity */ 
});

与隐藏类的链接将使指针事件传递到下面的任何内容