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

Question

我正在使用强制布局来显示一个网络，其中两个节点之间可能有多个链接，例如：http://bl.ocks.org/mbostock/1153292

当我单击两个节点之间的链接（路径元素上）时，我想显示相关信息。
像这样：http://i.imgur.com/7VcVI1z.jpg

问题是，当我单击页面上的任意位置时，我想隐藏该 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，我决定添加/删除“隐藏”类并使用 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);
        }

//Tooltip div declaration
<div id="tooltip" class="hidden">
    <p id="value"></p>
</div>

我不知道是否可以使用 D3 或者我是否必须使用 javascript/jQuery（toggleClass 左右）来执行此操作。我花了一些时间搜索，也许我做错了。
谢谢。

Answer 1

如果你可以选择使用 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();
    }
});

试试这个。我从答案here 中得到它。如果单击工具提示内以外的任何位置，它应该关闭工具提示。