Comment je peux cacher l’élément racine dans un dendogramme d3

J’ai le code suivant

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 [dy, dx]; }); 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); 

Je veux masquer uniquement l’élément racine d’un dendrogramme, mais je ne sais pas comment. Est-ce que quelqu’un peut m’aider, s’il vous plaît? Merci.

Voici la fonction de mise à jour pour les nœuds ……………………………………. ………………………………………….. ………………………………………….. ………………………………………….. ………………………………………….. ………………………………………….. ………………………………………….. ………………………………………….. ..

 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) { dy = 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) .toLocaleSsortingng('en'); var size = Number(d.size).toLocaleSsortingng('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(" + dy + "," + dx + ")"; }); 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 = dx; d.y0 = dy; }); } 

• Comment puis-je transmettre des données JSON renvoyées par un service Web à D3.json (…)?
• Une fonction dans d3.js pour créer des nœuds de début et de fin et des textes de nœud et de lien à partir d’une source JSON de taille variable
• y at-il un moyen d’append glisser-déposer dans svg d3.js?
• Graphique en temps réel D3: le glissement de la droite vers la droite et le décalage des données lorsque la longueur des données dépasse la transition limite ne fonctionne
• Comment utiliser un écouteur clavier pour déclencher une info-bulle lorsqu’il est appelé?

• Conversion de CSV en JSON – jQuery
• Déclenchement d’un événement Click sur un élément SVG
• Diagramme à barres D3 utilisant des données externes
• SVG D3 Défilement hauteur maximale
• Img.onload ne se déclenche pas lors de la définition dynamic de src sur dataURI

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

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