Javascript '；鼠标盖'；和'；mouseleave'；防止'；单击'；d3.js中的mouseevent

我有一个d3力图，当前在一个节点上有一个mouseover事件，突出显示被“mouseover'd”的节点，还有一个mouseleave事件，它恢复所有节点（因此不再突出显示）。我正在尝试添加一个操作，允许用户“单击”一个节点，它将使该节点高亮显示（也称为黄色笔划），直到他们再次单击该节点或单击另一个节点

这里的问题是mouseleave事件基本上会在鼠标离开后重置所有节点，这将撤消单击事件。此外，由于某些原因，我无法在执行highlight函数时添加检查JSON是否为“selected”的条件。下面是一段代码片段，末尾带有JSON供参考

    node = node
            .data(root.nodes)
            .enter().append("g")
            .attr("class", "node")
            .call(force.drag)
            .on('mouseover', connectedNodes) // highlights nodes+neighbors
            .on('mouseleave', restore) // resets
            .on('click', highlight) // suppose to highlight current node;

function connectedNodes() {

        d = d3.select(this).node().__data__;

        // Changes to all but the neighboring nodes
        node.style("opacity", function (o) { return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1; })
            .style("stroke", function (o) { return neighboring(d, o) | neighboring(o, d) ? "black" : "black"; });

        // Changes to all but neighboring links
        link.style("opacity", function (o) { return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1; })
            .style("stroke-width", function (o) { return d.index==o.source.index | d.index==o.target.index ? 2 : null; });
        // Maintains opacity of selected node.
        return d3.select(this)
                .style("opacity",1)
                .attr("r", 30);
}

function restore() {
    node.style("opacity", 1)
            .style("stroke", null);

    link.style("opacity", 1)
            .style("stroke-width", null);

function highlight() {
        return d3.select(this).style("stroke", "yellow");
}

这里是函数highlight（），它看起来应该是这样的，但是它不起作用，并且在单击时没有做任何事情

function highlight() {
    if (function(d) { return d.selected } == false)
    {
        function(d) { return d.selected} = true;
        return d3.select(this).style("stroke", "yellow");
    }
    else {
        function(d) { return d.selected = false } = false;
        return d3.select(this).style("stroke", null);
    }
}

这里是JSON

{
"nodes": [
{"fixed":true,"data": {"id": "foo","idType":"USERNAME","visible":true },"selected":false},
{"fixed":true,"data": {"id": "bar","idType":"USERNAME","visible":true },"selected": false}
],
"links": [
{classes":null,"data":{"color":"blue"","source":"foo","target":"bar","visible":true},"grabbable":false},
{classes":null,"data":{"color":"blue"","source":"bar","target":"foo","visible":true},"grabbable":false}
]}

---

您实际上想签入什么

突出显示
？您当前拥有的代码将永远不会执行任何操作，因为您正在声明从未调用过的函数。绑定到元素的
d
将是
highlight
的一个参数。在highlight中，我试图检查JSON当前是否高亮显示（在JSON中称为“selected”）。例如，如果我点击一个节点，它会在JSON中检查它是否被“选中”。如果selected为false，则会将其更改为true并突出显示节点。这不是当前代码所做的。您需要声明
d
作为
highlight
的参数，并使用它：
函数highlight（d）{if（d.selected==false）{…}else{…}
我明白了！我没有意识到我可以通过d来突出显示。我已经试过了，效果不错！这让我想到了如何解决mouseoff事件问题。在d3中，如果选择=该节点的true，是否可以始终检查所有节点？然后，在我的highlight（）中，我可以更改它，使其将d.selected设置为true或false，同时我有一个始终检查某个内容是否已被选中并保持高亮显示的功能（希望不会被我的restore（）函数杀死，因为它仍将选择=true）？我不确定你在问什么，但您只需选择所有元素，然后使用
.filter（）
筛选出您不感兴趣的元素，即未选择的元素。