Question

我使用强制布局来显示可以在两个节点之间建立多个链接的网络，例如：http://bl.ocks.org/mbostock/1153292

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

问题是当我点击页面上的任何地方时，我想要隐藏该div，除非它在另一条路径或div本身上，并且我不明白如何使用D3.js. <登记/>
我将click事件绑定到每个路径的代码：

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，我决定添加/删除课程＆＃34;隐藏＆＃34;并使用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中得到了它。如果在工具提示内部以外的任何位置单击，它应该关闭工具提示。

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

1 个答案: