0

Please see http://bl.ocks.org/mbostock/4339083 It loads data from flare.json and displays the nodes in a tree layout. I want to do the following: 1. Write a function to display only some of the nodes based on some conditions and reload the tree. 2. Write a function to add some nodes and reload the tree. 3. Write a function to remove some nodes and reload the tree.

I need to call these functions from outside d3.json("/d/4063550/flare.json", function(error, flare) in that sample.

Please let me know how to do it. I tried .children.splice method and again called upload(root). But it did not work.

Here is the relevant part of the code:

d3.json("/d/4063550/flare.json", function(error, flare) {
  root = flare;
  root.x0 = height / 2;
  root.y0 = 0;

  function collapse(d) {
    if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }

  root.children.forEach(collapse);
  update(root);
});

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })

    nodeEnter.append("circle")
  .attr("r", 1e-6)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

   // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

   // Transition exiting nodes to the parent's new position.
   var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  // Update the links…
   var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

   // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

      // Stash the old positions for transition.
      nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
      });
}
Avinash
  • 367
  • 2
  • 9
  • 24
  • Avinash - Please post your sample data too. And the data is being generated dynamically or it's a static data? – Unknown User Nov 16 '13 at 08:29
  • I am facing this problem with any json data in tree structure. My question is - how to remove certain nodes and redraw the tree? Please see the url link I have posted. – Avinash Nov 16 '13 at 10:33
  • [This question](http://stackoverflow.com/questions/11589308/d3-js-how-to-dynamically-add-nodes-to-a-tree) may help. – Lars Kotthoff Nov 16 '13 at 11:09
  • @Lars, the answer in that question tells how to collapse a node (although the question asks how to remove). My question is - the sample code (whose url I have mentioned) loads the data using d3.json. As it loads, it displays the entire tree. But I want to do the following - In d3.json, I want to only load the tree in memory. Later, I want to remove (not just collapse) some of the nodes and then display the tree. How do I do that? – Avinash Nov 16 '13 at 12:15
  • That question and answer tell you how to add nodes. – Lars Kotthoff Nov 16 '13 at 12:17
  • I am not sure if that helps me. Suppose the json data are stored in a file. In the file, the root node is "course". Each course has one or more subjects. Each subject has one more more topics and each topic has one or more subtopics. Currently the code displays the entire tree. But what I want is that, it loads the entire tree from memory but display only some of the nodes depending on certain conditions. This means I have to remove the remaining nodes. What code to write to remove the nodes and where to write this code? – Avinash Nov 16 '13 at 12:27
  • I cannot call that code when loading the data from json file. I need to do it later because user will make his choice later. – Avinash Nov 16 '13 at 12:35

1 Answers1

0

I changed your code a little bit and it works for me:

    d3.json("flare.json", function(json) {
      root = json;
      root.fixed = true;
      root.x = w / 2;
      root.y = h / 2 - 80;
      console.log("haha");
      firstTimeRun();
      update();
    });

    function firstTimeRun(){
      flatten(root).forEach(collapse);  
    }
    function collapse(d) {
    if (d.children) {
       d._children = d.children;
       d.children = null;
    }
  }
Rat
  • 297
  • 1
  • 5
  • 16
user3416221
  • 1