Problem of expading nodes

25 views
Skip to first unread message

Stix Mabakane

unread,
Aug 19, 2015, 10:04:48 AM8/19/15
to d3-js
Hello

Can you please help me. I am running a d3js script that display a relationship of nodes connected to each other in a tree visualization. Please see an attached picture called working tree. The working tree display all the nodes & children nodes. When you click the node/children node it clear the area and only show relationship of that clicked node/children connected to other children nodes. Good one. However, it is a problem when you have thousands of nodes.  Now, I want to normalize the tree visualization to only display the main module (central node) connected to the first group of children nodes. Yes, it does display central node connected to the first group of children nodes. Please see an attached not_working picture. The steelblue nodes shows nodes that are connected to other hidden children nodes. When you click on the steelblue children nodes visualization is suppose to display clear the area and Display central node connected to the clicked children node plus expand the tree with new children nodes that were hidden . It doesn't display hidden children nodes, instead, it only clear the area and display steelblue node (clicked node) connected to the central node. I am trying to filter the nodes and make sure the first view only display few nodes.

Please receive an attached script code called: circle.txt that is not working. If you remove the following function:

function collapse(d) {
    if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }
  root.children.forEach(collapse);
  update(root);
 
Visualization will work but it display all the nodes at the same time. If you add the below function it correctly display the central node connected to the first group of children nodes but the problem is when you click the steelblue node (children node) the program will not show children node (clicked one) connected to other children nodes that were hidden. I tried to include the following function just after the collapse function but it didn't work:
 // Toggle children on click.
        function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
 }

Thanks for your help in advance.  

Sticks


working_tree.png
not working.png
circle.txt

Stix Mabakane

unread,
Aug 21, 2015, 5:56:47 AM8/21/15
to d3-js
Hello D3js community

Does anybody have an idea on how i can resolve the below problem? I appreciate your help.

Sticks

Stix Mabakane

unread,
Aug 26, 2015, 7:36:21 AM8/26/15
to d3-js
Hello D3js developers

I am now starting to get deep understanding of the code used to generate relationship of nodes connected to each other: Quick question: Can i be able to instruct a program to call a function when i click a node? I have the function which is used to expand the tree of the nodes:

toggles = function click(d) {
  if (d.parent.children) {
    d.parent._children = d.parent.children;
    d.parent.children = null;
  } else {
    d.parent.children = d.parent._children;
    d.parent._children = null;
  }
  return update(d);
};

I want to call the above function when i click the node by using this syntax:

$(".node").click(function() {
        return toggles():
}

When i click the node nothing happens. The node doesn't react or execute the function. When i test another function called reform_focus using a way of clicking in the blank/background body it works. This is the code i use to instruct de visualization to call reform_focus() when i click the body:

$("body").click(function() {
      return reform_focus();
  });

Is it because thw word "node" is defined in d3js code and not html? I have .node in css style sheet. Thanks


Sticks 




On Wednesday, August 19, 2015 at 4:04:48 PM UTC+2, Stix Mabakane wrote:
Reply all
Reply to author
Forward
0 new messages