D3-如何更新树形布局中的隐藏分支

Question

I have a D3 tree layout with collapsible nodes, and I want to be able to update the links and link text with data that comes back from an ajax call. I've mostly got it working, but if any of the nodes in the tree are collapsed I can't figure out how to update the "hidden" data, so it properly displays the new data if those branches are later reopened.

The behavior might be clearer with this JSFiddle.

https://jsfiddle.net/ddbz5kq1/6/

// ************** Generate the tree diagram  *****************
var margin = {top: 0, right: 80, bottom: 20, left: 80};
var width = 850 - margin.right - margin.left;
var height = 1000 - margin.top - margin.bottom;
var i = 0;
var root;


// Exactly equal to our old var tree
var tree = d3.layout.tree()
    .size([height, width]);

// UNSURE, we did not have this before - before it was inside of function! //
var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

// Exactly qual to our old var canvas//
var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root = treeStructure;
root.x0 = height / 2;
root.y0 = 0;

update(root);

function update(source) {

  var duration = d3.event && d3.event.altKey ? 5000 : 500;

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

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

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

  // Enter the nodes.
  var nodeEnter = node.enter()
      .append("g")
        .attr("class", "node")
        .attr("transform", function(d) { 
          return "translate(" + source.y0 + "," + source.x0 + ")"; })
        .on("click", function(d) { toggle(d); update(d); });

  nodeEnter.append("circle")
      .attr("r",5)
      .style("stroke", "black")
      .style("fill", "yellow");

  nodeEnter.append("text")
        .text(function (d) {
            return d.dName; })
        .attr("text-anchor", "middle")
        .attr("dy", "-2");

  // 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", 2.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1);

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

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

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

  // Enter the links.
  link.enter()
      .insert("path", "g")
      .attr("class", "link")
      .attr("stroke",function(d) {
        return d.target.color;})
       .attr("stroke-width",function(d) {
        return d.target.linkWidth;})
      .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();

  // Adding in text for link text here
  // Update the link text
    var linktext = svg.selectAll("g.link")
        .data(links, function (d) {
        return d.target.id;
    });

    linktext.enter()
        .insert("g")
        .attr("class", "link")
        .append("text")
        .attr("dy", ".35em")
        .attr("dy", "-2")
        .attr("text-anchor", "middle")
        .text(function (d) {
        return d.target.linkText;});

    // Transition link text to their new positions
    linktext.transition()
        .duration(duration)
        .attr("transform", function (d) {
          return "translate(" + 
            ((d.source.y + d.target.y) / 2) + "," 
            + ((d.source.x + d.target.x) / 2) + ")";
          //return "translate(" + 500 + "," + 500 + ")";
    })

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


  //End of linktext addition


  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });   

}


// Toggle children.
function toggle(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  };       
}




//Update tree with our new data
function updateD3(newData) {
    var changeLink = svg.selectAll("path.link");

    changeLink.transition().duration(2000)
       .attr("stroke-width",function(d) {
        var targName = d.target.name;
        return newData[targName]["linkWidth"];})

    var changeText = svg.selectAll("g.link").select("text");  
    changeText.transition().duration(2000)

        .text(function (d) {
        var targName = d.target.name;
        return newData[targName]["linkText"]
            })
        .attr("dy", ".35em")
        .attr("dy", "-2")
        .attr("text-anchor", "middle")
        .style("fill-opacity", 1);

}

//In reality the jsonResponse would come from an ajax call, but it's formatted in this manner.
//First overwrite our original json data file, then update our chart
$(function(){
     $('#newData').click('submit', function(e){

jsonResponse = {"11p1Raise": {"linkWidth": "9.87", "linkText": "98.7"}, "8p2Bet": {"linkWidth": "9.90", "linkText": "99.0"}, "10p1Call": {"linkWidth": "0.07", "linkText": "0.7"}, "6p1Call": {"linkWidth": "9.90", "linkText": "99.0"}, "14p2Check": {"linkWidth": "0.10", "linkText": "1.0"}, "2p2Fold": {"linkWidth": "0.07", "linkText": "0.7"}, "9p1Fold": {"linkWidth": "0.07", "linkText": "0.7"}, "13p2Call": {"linkWidth": "9.90", "linkText": "99.0"}, "7p1Check": {"linkWidth": "3.14", "linkText":"31.4"}, "12p2Fold": {"linkWidth": "0.10", "linkText": "1.0"}, "1p1Bet": {"linkWidth": "6.86", "linkText": "68.6"}, "0": {"linkWidth": 4, "linkText": ""}, "5p1Fold": {"linkWidth": "0.10", "linkText": "1.0"}, "4p2Raise": {"linkWidth": "9.87", "linkText": "98.7"}, "3p2Call": {"linkWidth": "0.07", "linkText": "0.7"}}

        overwriteD3Json(jsonResponse)
        updateD3(jsonResponse);

            })
     });

//Rewrites our original json used to create the chart with our new information
function overwriteD3Json(newDataObject){
//Just want to loop over tree, rewrite all node text and thickness values
function jsonLoop(tree) {

    var name=tree.name;
    tree["linkText"]=newDataObject[name].linkText
    tree["linkWidth"]=newDataObject[name].linkWidth

  //Run the loop on child nodes, if they exist
  if (tree.hasOwnProperty("children")) {
  for (var i=0; i< tree.children.length; i++){
  jsonLoop(tree.children[i]);
  }
}}

//Run the loop on our main tree
jsonLoop(treeStructure)
}

Collapse a branch by clicking on a parent node, then click the "New Data Update" button in the top left corner. The data should change, but if you reopen the collapsed branches they have NOT been updated. You can confirm this by reclicking the "New Data Update" button and seeing that they should have been updated with these values the first time the button was clicked.

I attempted to solve this by writing over the original json file used to create the tree (this is still in the jsfiddle code), but it didn't work. I also tried calling the updateD3 function at various points in the toggle function (not currently in the jsfiddle code), but that didn't work either.

My D3 skills are limited so any advice about anything else in the code would be appreciated too!

Answer 1

The problem is if you click on a node, its children will be either stored as d.children or d._children.

You are not updating _children property.

Add this to your code.

if (tree.hasOwnProperty("_children")) {
    for (var i=0; i< tree._children.length; i++){
         jsonLoop(tree._children[i]);
    }
}

Hope this helps.