從d3js樹佈局中刪除節點及其子節點

Question

我開始用d3js玩d3js樹佈局。我開始this blo.cks示例

我想刪除一個路徑，它是孩子們點擊一個路徑，以下是我當前的代碼。

var treeData = [ 
 
    { 
 
    "name": "Top Level", 
 
    "parent": "null", 
 
    "children": [ 
 
     { 
 
     "name": "Level 2: A", 
 
     "parent": "Top Level", 
 
     "children": [ 
 
      { 
 
      "name": "Son of A", 
 
      "parent": "Level 2: A" 
 
      }, 
 
      { 
 
      "name": "Daughter of A", 
 
      "parent": "Level 2: A" 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "name": "Level 2: B", 
 
     "parent": "Top Level" 
 
     } 
 
    ] 
 
    } 
 
]; 
 

 

 
// ************** Generate the tree diagram \t ***************** 
 
var margin = {top: 20, right: 120, bottom: 20, left: 120}, 
 
\t width = 960 - margin.right - margin.left, 
 
\t height = 500 - margin.top - margin.bottom; 
 
\t 
 
var i = 0, 
 
\t duration = 750, 
 
\t root; 
 

 
var tree = d3.layout.tree() 
 
\t .size([height, width]); 
 

 
var diagonal = d3.svg.diagonal() 
 
\t .projection(function(d) { return [d.y, d.x]; }); 
 

 
var svg = d3.select("body").append("svg") 
 
\t .attr("width", width + margin.right + margin.left) 
 
\t .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
\t .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
root = treeData[0]; 
 
root.x0 = height/2; 
 
root.y0 = 0; 
 
    
 
update(root); 
 

 
d3.select(self.frameElement).style("height", "500px"); 
 

 
function update(source) { 
 

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

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

 
    // Update the nodes… 
 
    var node = svg.selectAll("g.node") 
 
\t .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") 
 
\t .attr("class", "node") 
 
\t .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 
 
\t .on("click", click); 
 

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

 
    nodeEnter.append("text") 
 
\t .attr("x", function(d) { return d.children || d._children ? -13 : 13; }) 
 
\t .attr("dy", ".35em") 
 
\t .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
 
\t .text(function(d) { return d.name; }) 
 
\t .style("fill-opacity", 1e-6); 
 

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

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

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

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

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

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

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

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

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

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

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

 
// Toggle children on click. 
 
function click(d) { 
 
    if (d.children) { 
 
\t d._children = d.children; 
 
\t d.children = null; 
 
    } else { 
 
\t d.children = d._children; 
 
\t d._children = null; 
 
    } 
 
    update(d); 
 
}

\t 
 
\t .node { 
 
\t \t cursor: pointer; 
 
\t } 
 

 
\t .node circle { 
 
\t fill: #fff; 
 
\t stroke: steelblue; 
 
\t stroke-width: 3px; 
 
\t } 
 

 
\t .node text { 
 
\t font: 12px sans-serif; 
 
\t } 
 

 
\t .link { 
 
\t fill: none; 
 
\t stroke: #ccc; 
 
\t stroke-width: 2px; 
 
\t } 
 
\t

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

眼下上單擊路徑，該路徑是越來越刪除。我也想刪除連接的節點（孩子）和所有它的後繼者（如果有的話）。

如何訪問路徑觸發的點擊功能內的子節點？

Answer 1

這是錯誤的：

function removeNode() 
    { 
    this.remove();//it will remove only the link. 
    } 

你可以做這樣的事情，除去節點及其所有兒童。

function removeNode(d) 
{ 
    //this is the links target node which you want to remove 
    var target = d.target; 
    //make new set of children 
    var children = []; 
    //iterate through the children 
    target.parent.children.forEach(function(child){ 
     if (child.id != target.id){ 
     //add to the child list if target id is not same 
     //so that the node target is removed. 
     children.push(child); 
     } 
    }); 
    //set the target parent with new set of children sans the one which is removed 
    target.parent.children = children; 
    //redraw the parent since one of its children is removed 
    update(d.target.parent) 
} 

工作示例here

希望這有助於！