How I can hide the root element in a dendogram d3

*爱你&永不变心* 提交于 2020-01-05 07:43:18

问题


I have the following code

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

I want to hide only the root element of a dendrogram but I don't know how .Can anyone please help me? Thanks.

Here is the update function for nodes ...........................................................................................................................................................................................................................................................................................................................................................................................................

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

回答1:


The easiest way to do this would be to filter your update selections on the depth (depth === 0 is the root node):

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

You'd also have to do this for the links:

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


来源:https://stackoverflow.com/questions/40176933/how-i-can-hide-the-root-element-in-a-dendogram-d3

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!