CODEWITHSUNDEEP
javascriptsvgd3.jsclickforce-layout
constancesou
constancesou

Reputation: 65

d3.js click event show/hide html element

I'm using a force layout to show a network where it is possible to have multiple links between two nodes, like this example : http://bl.ocks.org/mbostock/1153292

I want to show related infos when I click on a link between two nodes (so on the path element).
Like so : https://i.sstatic.net/m9gyG.jpg


The problem is that I want to hide that div when I click anywhere on the page except if it's on another path or the div itself, and I don't understand how to do this with D3.js.

The code where I bind the click event to each path:

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);

To show/hide the div I've decided to add/remove the class "hidden" and use CSS display:none.
Here's the function running on the click event:

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>

I don't know if it's possible with D3 or if I must do this with javascript/jQuery (toggleClass or so). I've spent some time searching, maybe I'm doing this the wrong way.
Thanks.

Upvotes: 3

Views: 5159

Answers (1)

dcclassics
dcclassics

Reputation: 896

If you have the option to use 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();
    }
});

Try this. I've taken it from the answer here. It should close the tooltip if clicked anywhere other than inside the tooltip.

Upvotes: 2

Related Questions