Show / hide element on mouse click in D3

Question

I am trying to make the box appear when you click a node and then disappear if you click off of it. Right now it appears from the get go and it doesn't go away when you click off. Here is the JSFiddle

I tried to I am assuming the edit goes somewhere in here but I can't figure it out for the life of me. I've also checked the other related questions but they have different specific issues.

 var node = svg.selectAll(".node")
  .data(data.nodes)
.enter().append("g")
  .attr("class", "node")
  .on("mouseover", mouseover)
.on("mouseout", mouseout)
 .on("click", function(d) {
  text = "Generic Text Here: " + d.name;
      d3.selectAll(".infobox")  
    //.append("rect")
    //.attr("x", 70)
    //.attr("y", 5)
    //.attr("height", 100)
    //.attr("width", 200) 
    //.select("text")
    .select("a")
    .attr("xlink:href", text) 
    .selectAll("text").text(text)})  
  .call(force.drag);

Thank you thank you

Correct. And I want it to start off but then show up when a node is clicked/disappear again when user clicks off — , Feb 07 '17 at 05:53

score 0 · Answer 1 · edited May 23 '17 at 12:08

Seems similar to this question: javascript hide/show element

If you prefer not to use jQuery (d3.js can do some of the same things anyways- you know your app best):

///Show. Put in your "mouseout" callback
document.getElementById(id).style.display = 'block';
//Hide. Put in your callback in .on("click", ....
document.getElementById(id).style.display = 'none';

The "id" corresponds to your box. Hope that helps!

EDIT: http://jsfiddle.net/nw7g157c/19/

I had to do a bit of hacking around, but I used the above suggestion to add this:

document.documentElement.onclick = function(e) {
  let evt = e || window.event, // IE...
      target = evt.target || evt.srcElement // IE again...

  if (target.nodeName !== 'circle') { //show the plot box if not a circle:
      document.getElementById('plot').style.display = 'block';
    }
}

and this in your on("click"...)

document.getElementById('plot').style.display = 'none';

Please up vote as it will feed my children

score -1 · Accepted Answer · answered Feb 07 '17 at 06:10

-1

Apart from hide/show I guess you also need to handle scenario where one node clicked and box shown now clicking on another node then the box should be visible with that node data

  if(this.getAttribute("ind") == prev && document.getElementById("plot").style.display == 'block'){
        document.getElementById("plot").style.display = 'none';
    }else{
    document.getElementById("plot").style.display = 'block';}
    prev = i;

See this fiddle http://jsfiddle.net/nw7g157c/9/

answered Feb 07 '17 at 06:10

Vinod Louis

4,812
1
25
46

Brilliant! That's a big step forward, thank you! Do you know how to do the hide/show? Apologies if it is on that new fiddle. I'm on my phone so it may be acting weird. – Feb 07 '17 at 06:20
1

@AlyssaJaisle yes thats on the fiddle – Vinod Louis Feb 07 '17 at 06:22
ah, I see. It clicks back off when you click the node again. Is there a way to hide it when you click in the background? My end goal is to have the box overlaying the nodes. The user will need to be able to click an arbitrary place on the screen/layout area for it to click off. Thanks so much for your help this far. Greatly appreciated. – Feb 07 '17 at 06:28
Amazing! Thank you so so much for your time. Opening my computer back up to figure out how to mark this as answered. Then I can rest happy. – Feb 07 '17 at 06:45

Show / hide element on mouse click in D3

2 Answers2