Javascript d3.js单击事件显示/隐藏html元素

我使用一个force布局来显示一个网络，其中两个节点之间可以有多个链接，例如：

我想在单击两个节点之间的链接时显示相关信息（路径元素也是如此）。
像这样：

问题是，当我单击页面上的任何位置时，我想隐藏该div，除非它位于另一个路径或div本身，我不知道如何使用D3.js实现这一点。

将单击事件绑定到每个路径的代码：

var force = d3.layout.force()
                .nodes(d3.values(nodes))
                .links(links)
                .size([width, height])
                .linkDistance(60)
                .charge(-300)
                .on("tick", tick)
                .start();

var path = svg.append("g").selectAll("path")
                .data(force.links())
                .enter().append("path")
                .on("click", clickPath);

要显示/隐藏div，我决定添加/删除类“hidden”，并使用CSS

display:none

以下是在单击事件上运行的函数：

function clickPath(d)
       {
            d3.select("#tooltip")
                .style("left", "20px")
                .style("top", "20px")
                .select("#value")
                .text(d.infos.name_explo);

            //Show the tooltip
            d3.select("#tooltip").classed("hidden", false);
        }

//工具提示div声明

我不知道D3是否可行，或者我是否必须用javascript/jQuery（toggleClass或其他）实现这一点。我花了一些时间搜索，也许我做得不对。

---

谢谢。

如果您可以选择使用jQuery

$(document).mouseup(function (e)
{
    var container = $("#tooltip");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

---

试试这个。我是从答案中选出来的。如果单击工具提示内部以外的任何位置，则应关闭工具提示

你能使用jQuery吗？是的，它能工作。我想我以前试过，但没有使用正确的选择器和clickPath功能。以下是我更改的：$（“#工具提示”）.show（）；而不是d3.select（#tooltip”）.classed（“hidden”，false）；谢谢

$(document).mouseup(function (e)
{
    var container = $("#tooltip");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});