Question

我在d3中工作，旋转集群布局..我希望根据子节点数量调整集群布局。基于我的代码，当我用最小的孩子打开父母时，没有问题当我打开包含更多子项的父项时，存在一些重叠，所以想要进一步减少簇大小，当父项中有更多子项时...我该怎么办？< / p>

我的整个代码是

                myJSON= http://pastebin.com/vZ32jGQc
                treeData = myJSON;
                var selectedNode = null;
                var draggingNode = null;

                var panSpeed = 200;
                var panBoundary = 0; 

                var i = 0;
                var duration = 750;
                var root;

                var width = 5000;
                var height = 5000;

                var diameter = 750;

                var tree = d3.layout.tree().size([360, diameter / 2 - 120])

                    .separation(function (a, b) {
                    return (a.parent == b.parent ? 1 : 5) / a.depth;
                });

                var diagonal = d3.svg.diagonal.radial()

                    .projection(function (d) {
                    return [d.y, d.x / 180 * Math.PI];
                });

                root = treeData;
                root.x0 = height / 2;
                root.y0 = 0;

                function sortTree() {
                    tree.sort(function (a, b) {
            return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
                    });
                }
                sortTree();
                var baseSvg = d3.select("#tree-container").append("svg")
                    .attr("width", 1200)
                    .attr("height",1200)
                    .attr("class", "overlay")

                 .attr("transform", "translate(" + 1000 + "," + 1000 + ")");
                function collapse(d) {

                    if (d.children) {
                        d._children = d.children;
                        d._children.forEach(collapse);
                        d.children = null;
                    }

                update(d);
                }

                function expand(d) {

                    if (d._children) {
                        d.children = d._children;
                        d.children.forEach(expand);
                        d._children = null;
                    }
                }
                function toggleChildren(d) {

                    if (d.children) {
                        d._children = d.children;
                        d.children = null;
                    } else if (d._children) {
                        d.children = d._children;
                        d._children = null;
                    }
                    return d;
                }

                function click(d) {
                if(!d.parent){
                return;
                }

                if (!d.children) 
                     myJSON.children.forEach(collapse);

                    if (d3.event.defaultPrevented) return; 

                    d = toggleChildren(d);

                    update(d);


                }

                function update(source) {

                    var levelWidth = [1];
                    var childCount = function (level, n) {
                        if (n.children && n.children.length > 0) {
                if (levelWidth.length <= level + 1) levelWidth.push(0);

                            levelWidth[level + 1] += n.children.length;
                            n.children.forEach(function (d) {
                                childCount(level + 1, d);
                            });
                        }
                    };
                    childCount(0, root);
                     var nodes = tree.nodes(root); 
                    links = tree.links(nodes);
                    node = svgGroup.selectAll("g.node")
                        .data(nodes, function (d) {
                        return d.id || (d.id = ++i);
                    });
                        var nodeEnter = node.enter().append("g")

                        .attr("class", "node")

                    .on('click', click)

                      nodeEnter.append("circle")
                        .attr("class", "smallcircle")
                            .style("stroke", function(d) {
                      return d.color;
                    })


                    nodeEnter.append("text")

                    .text(function (d) {
                        return d.name;
                    })
                     //   .style("font", "12px serif")
                        .style("opacity", 1)
                        .style("fill-opacity", 0)

                .on("mouseover", function (d) {
                    var r = d3.select(this).node().getBoundingClientRect();
                           d3.select("div#tooltip")
                                .style("display", "inline")
                               .style("top", (r.top-25) + "px")
                               .style("top", 10 + "px")
                            .style("left", (d3.event.pageX) + "px")     
                                .style("top", (d3.event.pageY - 40) + "px") 
                              .style("left", r.left + 40+"px")
                              .style("left",  + "px")
                                .style("position", "absolute")
                               .text(d.t);
                         })
                    .on("mouseout", function(){
                       d3.select("div#tooltip").style("display", "none")
                   })


                    node.select("circle.nodeCircle")
                        .attr("r", 4.5)
                        .style("fill", function (d) {
                        return d._children ? "red" : "#fff";
                    });

                     var nodeUpdate = node.transition()
                        .duration(duration)
                        .attr("transform", function (d) {
           return "rotate(" + (d.x - 90) + ")
              translate(" + d.y + ")rotate(" + (-d.x + 90) + ")";
                    });

                    nodeUpdate.select("circle")
                        .attr("r", 4.5)

                        .style("fill", function (d) {
                        return d._children ? "lightsteelblue" : "#fff";
                    });

                    nodeUpdate.select("text")
                       .style("fill-opacity", 9)
            .attr("fill",function(d){return (d.children?"red":"black");})
               .attr("font-size",function(d)
         {return (d.children?"20px":"12px");})



                    .attr("dy", ".35em")

                        .attr("text-anchor", function (d) {
                        return d.x < 180 ? "start" : "end";
                    })


                        .attr("transform", function (d) {
                return d.x < 180 ? "translate(8)"
               : "rotate(360)translate(-8)";
                    });

                    var nodeExit = node.exit().transition()
                        .duration(duration)
                        .attr("transform", function (d) {
                        return "translate(" + source.x + "," + source.y + ")";
                    })
                        .remove();

                    nodeExit.select("circle")
                        .attr("r", 0);

                    nodeExit.select("text")
                        .style("fill-opacity", 0);


                    var link = svgGroup.selectAll("path.link")
                        .data(links, function (d) {
                        return d.target.id;
                    })
                link.style("stroke", function(d) {
                      return d.color;
                    })

                    link.enter().insert("path", "g")
                        .attr("class", "link")
                         link.style("stroke", function(d) {
                      return d.target.color;
                    })
                        .attr("d", function (d) {
                        var o = {x: source.x, y: source.y};
                        return diagonal({source: o, target: o});
                      });



                    link.transition()
                        .duration(duration)
                        .attr("d", diagonal);


                    link.exit().transition()
                        .duration(duration)
                        .attr("d", function (d) {
                         var o = {x: source.x, y: source.y};
                        return diagonal({source: o, target: o});
                      })

                        .remove();


                    nodes.forEach(function (d) {
                        d.x0 = d.x;
                        d.y0 = d.y;
                    });
                }

                var svgGroup = baseSvg.append("g")
                .attr("transform", "translate(" + 550 + "," + 300 + ")")


            d3.selectAll("text").style("fill", function (d) 
         { return d3.select(this).classed(d.cond, true); })


                root.children.forEach(function (child) {
                    collapse(child);
                });

                update(root);
                d3.select(self.frameElement).style("height", width);

根据子节点数量调整集群布局

0 个答案: