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

Question

我有一个带有可折叠节点的D3树布局，我希望能够使用从ajax调用返回的数据更新链接和链接文本。我主要是让它工作，但如果树中的任何节点都崩溃了，我就无法弄清楚如何更新＆＃34;隐藏＆＃34;数据，如果稍后重新打开这些分支，它会正确显示新数据。

这个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)
}

通过单击父节点折叠分支，然后单击＆＃34;新数据更新＆＃34;左上角的按钮。数据应该更改，但如果您重新打开折叠的分支，则它们尚未更新。您可以通过重新点击＆＃34;新数据更新＆＃34;来确认这一点。按钮，并在第一次单击按钮时看到它们应该已使用这些值更新。

我尝试通过写入用于创建树的原始json文件来解决这个问题（这仍然在jsfiddle代码中），但它没有用。我也尝试在toggle函数的各个点调用updateD3函数（当前不在jsfiddle代码中），但是它也没有工作。

我的D3技能有限，所以对代码中任何其他内容的任何建议也会受到赞赏！

Answer 1

问题是如果你点击一个节点，它的子节点将被存储为d.children或d._children。

您没有更新_children属性。

将此添加到您的代码中。

volume.shape

希望这有帮助。