2016-10-21 1 views
1

verstecken Ich habe den folgenden CodeWie kann ich das Stammelement in einem Dendogramm d3

 var m = [20, this.settings.get("margin_right"), 20, this.settings.get("margin_left")], 
       w = width - m[1] - m[3], 
       h = height - m[0] - m[2], 
       i = 0; 
      var tree = d3.layout.tree() 
       .size([h, w]); 
      var diagonal = d3.svg.diagonal() 
       .projection(function(d) { return [d.y, d.x]; }); 
      var vis = d3.select(this.el).append("svg:svg") 
       .attr("width", w + m[1] + m[3]) 
       .attr("height", h + m[0] + m[2]) 
      .append("svg:g") 
       .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 
      data.x0 = h/2; 
      data.y0 = 0; 
      function toggle_children(tree, level) { 
       if(tree.children) { 
        _(tree.children).each(function(child) { 
         toggle_children(child, level+1); 
        }); 
        if(level >= initial_open_level) { 
         toggle(tree); 
        } 
       } 
      } 
      var initial_open_level = this.settings.get("initial_open_level"); 
      if(initial_open_level >= 1) { 
       toggle_children(data, 1); 
      } 
      var duration = 0; 
//   root = data.children[0]; 
//   update(root); 
      update(data); 

ich nur das Wurzelelement eines dendrogram verstecken will, aber ich weiß nicht, wie .Can mir jemand bitte helfen ? Vielen Dank.

Hier ist die Update-Funktion für Knoten ....................................... .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. ......

function update(source) { 
       // alert(source.name); 
       // Compute the new tree layout. 
       console.log("Passo da update"); 
//    var nodes = tree.nodes(root).reverse(); 
       var nodes = tree.nodes(data).reverse(); 
       // Normalize for fixed-depth. 
       nodes.forEach(function(d) { d.y = d.depth * 320; }); 
       // Update the nodes… 
       var node = vis.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("svg:g") 
        //.attr("class", "node") 
        .attr("class", function(d) { return d._children ? "node node_close" : "node node_open"; }) 
        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 
        .on("click", function(d) { toggle(d); update(d); }); 
       console.log(d.name); 
       nodeEnter.append("svg:circle") 
        .attr("r", 10) 
        .style("fill", function(d) { return checkColor(d);})     
        .style("cursor", function(d) { return d.children || d._children ? "pointer" : "default"; }) 
        .style("stroke", node_outline_color); 
       nodeEnter.append("svg:text") 
        .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 
        .attr("dy", "25") 
        .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
        .style("cursor", function(d) { return d.children || d._children ? "pointer" : "default"; }) 
        .style("fill-opacity", 1e-6) 
        .text(function(d) { 
         if(has_size) { 
          var sum = Number(d.sum) .toLocaleString('en'); 
          var size = Number(d.size).toLocaleString('en'); 
          if(d.name == "TARGET"){ 
           var long_label = ""; 
           var short_label = ""; 
          }else { 
           var long_label = d.name + ' (' + sum + ') - (' + d.count + ')'; 
           var short_label = d.name + ' (' + size + ')'; 
          } 
          return d.children || d._children ? long_label : short_label; 
         } 
         else { 
          if(d.name == "TARGET"){ 
           d.name = ""; 
          } 
          return d.name; 
         } 
        }); 
       .call(wrap,40); 
        var nodeUpdate = node.transition() 
        .duration(duration) 
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); 
       nodeUpdate.select("circle") 
        .attr("r", 10) 
        .style("fill", function(d) { return checkColor(d);})     
//     .style("fill", function(d) { return d._children ? node_close_color : node_open_color; }); 
       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); 
       // Update the links… 
       var link = vis.selectAll("path.link") 
        .data(tree.links(nodes), function(d) { return d.target.id; }); 
       // Enter any new links at the parent's previous position. 
       link.enter().insert("svg:path", "g") 
        .attr("class", "link") 
        .attr("d", function(d) { 
         var o = {x: source.x0, y: source.y0}; 
         return diagonal({source: o, target: o}); 
        }) 
        .transition() 
        .duration(duration) 
        .attr("d", diagonal); 
       // 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; 
       }); 
      } 
+0

den Code, wo Sie die Knoten auf den SVG hinzufügen ... – Mark

+0

@ Mark I update ... vielleicht ist dies der Code, den Sie brauchen – joesid

Antwort

1

der einfachste Weg, dies zu tun wäre, Ihre Update-Auswahl auf der depth filtern (Tiefe === 0 ist der Wurzelknoten):

var node = vis.selectAll("g.node") 
    .data(nodes, function(d) { return d.id || (d.id = ++i); }); 

node = node.filter(function(d) { return d.depth > 0 }); 

Sie würden dies auch für die Links zu tun haben:

var link = vis.selectAll("path.link") 
    .data(tree.links(nodes), function(d) { return d.target.id; }); 

link = link.filter(function(d) { return d.source.depth > 0 }); 
Verwandte Themen