On click of D3 Tree node information to be displayed in one another div

[ak]

I have implemented tree but the problem is that the information I want to show on the nodes, are too big. I am thinking of displaying those information in a separate div on click of any node in the tree.

the data that is pushed is having format like this (this one is the root node though). This Rule I have show on other div:

data.push({"name":"0","parent":" ","prediction":"N","RecordCount":"296","Rule":" ","RuleAttribute":" "})

 I have declared a simple div like svg :
<div id="svgcontainer"> </div> <div id="info"> </div>

then I have click function outside update (source):

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  d3.selectAll(".node").attr('r', 5)
      .style("fill", function(d) { return color(d.group); })
      .style("stroke","none");      
      d3.select(this).attr('r', 25)
      .style("fill","lightcoral")
      .style("stroke","red");
     d3.select("#info").text(d.text);
  update(d);
 
}

Request if someone can help me in understanding what is wrong with my code. Many thanks.

[Seemant Kulleen]

Perhaps, you can try to add a <p> element in #info. That line in your code could then change to:

d3.select("#info p").html(d.text)

Cheers,

Seemant
 

--

Oakland Finish Up Weekend
Be Amazed.  Be Amazing.
Get Mentored | Get Inspired | Finish Up

http://oaklandfinishup.com

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ak]

Thanks ... My mistake ...apart from toggle logic in the the click function, should only have the select of the div and text like :

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }

   d3.select("#info").text(d.text);

  update(d);
 
}