0

我正在进行一个项目。该项目包括使用 javascript 和令人惊叹的 d3.js 设计营销仪表板。我需要一个带有序数比例的水平图表,但我有一个树结构而不是纯平面名称。因此,我为垂直标签设计了一棵树,而不是文本...要求:当最终用户单击一个节点时,所有对应的条都折叠到一个条(当然,该条的值是子条。)为了成为直方图,所有条必须从相同的 x 开始。此外,在垂直方向上,从条到条的距离应该相同。

下面的“玩具”程序显示了上面的垂直标签 out 。不幸的是,为了实现理想的布局,我添加了“虚拟节点”。这不是一个解决方案,因为我不知道如何制作“节点折叠功能”。感谢您的时间。

  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style>
 .node {
        font: 11px sans-serif; 
       }

 .link {
        fill: none;
       stroke: #ccc;
  stroke-width: 1px;
       }
 </style>
 </head>
 <body>

<div id="viz"></div>

 <script type="text/javascript">


  var treeData = { "name" : " ", "c":[150, 5, 4,0] , "children" :  [
                 { "name" : "Super Specials", "c":[150, 5, 4,10], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }      ]                     }]}
                ,{ "name" : "Package Deals", "c":[50, 15, 4,20], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Audio & Home Theatre", "c":[120, 15, 4,10] , "children" :  [
                   { "name" : "Speaker Packs", "c":[45, 15, 5,23], "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }  
                   ,{ "name" : "Portable Radios", "c":[40, 15, 7,26], "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                       ,{ "name" : "Amplifiers", "c":[51, 15, 4,26], "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                   ,{ "name" : "Accessories", "c":[53, 15, 9,24], "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                       ,{ "name" : "Home Theatre Systems", "c":[54, 15, 3,26], "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                       ,{ "name" : "Hi-Fi Systems", "c":[56, 15, 4,27], "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                        ]}
                    ,{ "name" : "Televisions & Videos", "c":[130, 55, 8,10] , "children" :  [
                   { "name" : "Televisions", "c":[51, 15, 4,26], "children" :  [
                       { "name" : "LED", "c":[45, 15, 5,23]}
                           ,{ "name" : "Plasma", "c":[40, 15, 7,26]}
                           ,{ "name" : "LCD", "c":[51, 15, 4,26]}

                       ]}
                       ,{ "name" : "Players & Recorders", "c":[45, 15, 5,23] , "children" :  [
                           { "name" : "Dvd Players & Recorders", "c":[45, 15, 5,23]}
                           ,{ "name" : "Blu-Ray Players and Recorders", "c":[40, 15, 7,26]}                
                           ]}
                       ,{ "name" : "Set Top Boxes & PVR", "c":[40, 15, 7,26], "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                       ,{ "name" : "Accessories", "c":[53, 15, 9,24], "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }

                    ]}
                    ,{ "name" : "Computers & Technology", "c":[140, 66, 4,4], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                    ,{ "name" : "Whitegoods", "c":[120, 35, 4,7], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                    ,{ "name" : "Furniture", "c":[50, 25, 12,9], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                    ,{ "name" : "Cooking", "c":[80, 25, 4,4], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                    ,{ "name" : "Heating & Cooling", "c":[87, 43, 2,22], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                    ,{ "name" : "Floor Care", "c":[78, 15, 4,12], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                    ,{ "name" : "Small Appliances", "c":[78, 17, 14,3], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                    ,{ "name" : "Personal Grooming", "c":[45, 9, 4,5], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "DIY Security", "c":[47, 5, 9,0], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                    ,{ "name" : "Gadgets", "c":[23, 57, 4,0], "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
            ]};


  //
         var vis = d3.select("#viz").append("svg:svg")
        .attr("width", 800)
        .attr("height", 800)
        .append("svg:g")
        .attr("transform", "translate(100, 0)");

      var labelx=770;
      var labely=650;
     var tree = d3.layout.tree()
           .size([labelx,labely]) .separation(function(a, b) { return 1  });



     //http://mbostock.github.io/d3/talk/20111018/tree.html

     var nodes = tree.nodes(treeData);


     var diagonal = d3.svg.diagonal()
        .projection(function(d) { 

                var retx,rety;

                retx=d.y;
                rety=d.x;
                if(d.children==null)
                {
                    //retx=labely;
                }
                   return [retx, rety]; 
             }
             );





      var link = vis.selectAll("pathlink")
        .data(tree.links(nodes))
        .enter().append("svg:path")
       .style("opacity",  function(d) { 
                    var ret=1;
                    if(d.source.depth==0)
                    {
                        ret=0;
                    }
                return ret;
           })
        .attr("class", "link")
        .attr("d", diagonal);



       var node = vis.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })


     var rec = vis.selectAll("g.node")   
        .data(nodes)
        .enter()
        .append("svg:g")





       node.append("svg:circle")
        .attr("r",  function(d) { 
            var ret=4.5;
            if(d.name===" ")
            {
                ret=0.01;
            }
            return ret;
            });


       var txtw=node.append("g")
        .attr("transform", function(d) { return "translate(-8,0)"; });

       var text=txtw.append("svg:text")
        .attr("dx", function(d) {
            var ret=0;
            if(d.children === undefined)
            {
                ret=16;
            } 
            return  ret;})
        .attr("dy", 3)
        //.attr("text-anchor", "end")
        .attr("text-anchor", function(d) { return d.children ? "end" : "end"; })
        .text(function(d) { return d.name; });

        var maxwith=0
        text.each(function() {
            var tmp=this.getBBox().width;
            if(maxwith<tmp)
            {
                maxwith=tmp;
            }
               });
              console.log("maxwith=",maxwith);



      </script>
    </body>
 </html>
4

1 回答 1

0

最后我已经解决了。如果有人需要它,只需查看代码。在绿色圆圈的位置,我将放置直方图条。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="d3/d3.v3.js"></script>

<style>


.node circle {

  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font-size: 11px;
}

path.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 3px;
}


 .text_small { font-family: sans-serif;  font-size: 11px; }
 .text_big { font-family: sans-serif;  font-size: 16px; }

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1px;
}
/*
 *  to be remnoved after merge with test19.html
 */
/*
 * style for the close,minimize buttoms  start
 */
        .icon {   color:white;  
                  stroke-width:2;
                  fill:white;
                  stroke:gray; }

        .icon_disable{color:white;  
                  stroke-width:2;
                  fill:white;
                  stroke:LightGray ; }
    /*
     *        .buttomcreate{transform: scale(0.1, 0.1);
     */
       .buttomcreate{transform: scale(1, 1);
                    position: relative;}


       .buttomdel {transform: scale(0.0, 0.0);
                  transition:  0.5s;
                  position: absolute;}

        .buttoms {position: absolute;
                      top: 0px;
                     left: 0px;}
/*
 * style for the close,minimize buttoms  end
 * 
 *       display: table-cell;   
 */

   #zoom{
/*
    position:fixed;
*/
         }

   #master{position:static


   }

    .hist_test{
         transform: scale(1, 1);
         transition:  0.5s;
         position: relative;
         background-color:grey;   

    }
    .tooltip{           color:black;  
             background-color:white;
                   box-shadow: 10px 10px 5px; 
                       padding-top:7px;
                       padding-bottom:7px;
                       padding-right:10px;padding-left:10px;
                       border:1px solid;
                       border-radius:9px;
                       opacity:0.95;
                       }

     .menu{            color:black;  
             background-color:white;
                   box-shadow: 10px 10px 5px; 
                       padding-top:4px;
                       padding-bottom:4px;
                       border:1px solid;

                       }
      .menu2{            color:black;  
             background-color:white;
                       padding-top:2px;
                       padding-bottom:2px;
                       padding-right:10px;padding-left:10px;
                  }
      .menu2up{         color:white;  
             background-color:orange;
                padding-right:0px;padding-left:0px;
                      padding-top:2px;
                       padding-bottom:2px;
                       padding-right:10px;padding-left:10px;
                  }


        .selec{
                      opacity:0.5;             
               }

        .icon {   color:white;  
                  stroke-width:2;
                  fill:white;
                  stroke:black;                              
               }




    .axis path,
    .axis line { fill: none; stroke: black;  shape-rendering: crispEdges; stroke-width:1;}
    .axis text { font-family: sans-serif;  font-size: 16px; }



    .axis_names path,
    .axis_names line { fill: none; stroke: black;  shape-rendering: crispEdges; stroke-width:1;}
    .axis_names text { font-family: sans-serif;  font-size: 11px; }
    .axis_name_text_small { font-family: sans-serif;  font-size: 11px; }


    .axis_nameb path,
    .axis_nameb line { fill: none; stroke: black;  shape-rendering: crispEdges; stroke-width:1;}
    .axis_nameb text { font-family: sans-serif;  font-size: 16px; }
    .axis_name_text_big { font-family: sans-serif;  font-size: 16px; }





    .axis_max path,
    .axis_max line { fill: none; stroke: black;  shape-rendering: crispEdges; stroke-width:1;}
    .axis_max text { font-family: sans-serif;  font-size: 25.9px; }

    .hist_title {fill: black; font-family: sans-serif;  font-size: 20px}
    .hist_xaxis {fill: black; font-family: sans-serif;  font-size: 16px}
    .hist_yaxis {fill: black; font-family: sans-serif;  font-size: 16px}
    .hist_green{fill:green}
    .hist_red{fill:red}
    .hist_yellow{fill:yellow}
    .hist_blue{fill:blue}
    .hist_tran{opacity:0.5}


    .options{        
                   box-shadow: inset -5px -5px 5px #888;

                   padding-bottom:7px;
                   padding-right:10px;}

            .iconb {   float:right;
                   }


</style>

  </head>
  <body>

    <div id="viz"></div>

    <script type="text/javascript">

//  bug There is  a bug in the getBBox  width. "Blu-Ray Players and Recorders" returns a letter smaller width for 11px san-serif




 // to be remnoved after merge with test19.html
 var hist_div = d3.select("body").append("div").attr("id","master") ;
 var small=0;


 //   

 var datasetpp = { "name" : " ", "c":[150, 5, 4,0] , "children" :  [
                 { "name" : "Super Specials", "c":[150, 5, 4,10]}
                 //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Package Deals", "c":[50, 15, 4,20]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Audio & Home Theatre", "c":[120, 15, 4,10] , "children" :  [
                   { "name" : "Speaker Packs", "c":[45, 15, 5,23]}
                   //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                   ,{ "name" : "Portable Radios", "c":[40, 15, 7,26]}
                   //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                   ,{ "name" : "Amplifiers", "c":[51, 15, 4,26]}
                   //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                   ,{ "name" : "Accessories", "c":[53, 15, 9,24]}
                   //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                   ,{ "name" : "Home Theatre Systems", "c":[54, 15, 3,26]}
                   //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                   ,{ "name" : "Hi-Fi Systems", "c":[56, 15, 4,27]}
                   //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                    ]}
                ,{ "name" : "Televisions & Videos", "c":[130, 55, 8,10] , "children" :  [
                   { "name" : "Televisions", "c":[51, 15, 4,26], "children" :  [
                       { "name" : "Plasma", "c":[45, 15, 5,23] }
                       ,{ "name" : "LED", "c":[40, 15, 7,26]}
                       ,{ "name" : "LCD", "c":[51, 15, 4,26]}

                       ]}
                   ,{ "name" : "Players & Recorders", "c":[45, 15, 5,23] , "children" :  [
                       { "name" : "Dvd Players & Recorders", "c":[45, 15, 5,23]}
                       ,{ "name" : "Blu-Ray Players and Recorders", "c":[40, 15, 7,26]}                
                       ]}
                   ,{ "name" : "Set Top Boxes & PVR", "c":[40, 15, 7,26]}
                   //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }
                   ,{ "name" : "Accessories", "c":[53, 15, 9,24]}
                   //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]           }

                    ]}
                ,{ "name" : "Computers & Technology", "c":[140, 66, 4,4]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Whitegoods", "c":[120, 35, 4,7]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Furniture", "c":[50, 25, 12,9]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Cooking", "c":[80, 25, 4,4]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Heating & Cooling", "c":[87, 43, 2,22]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Floor Care", "c":[78, 15, 4,12]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Small Appliances", "c":[78, 17, 14,3]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Personal Grooming", "c":[45, 9, 4,5]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "DIY Security", "c":[47, 5, 9,0]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
                ,{ "name" : "Gadgets", "c":[23, 57, 4,0]}
                //, "children" : [ {"name" : " ", "c":[150, 5, 4,0]  , "children" : [ {"name" : " ", "c":[150, 5, 4,0]                       }]                     }]}
            ]};


    //global
var tick_witdh=40;  
var text_move=10;
var m = [20, 120, 20, 120],
    w = 1280 - m[1] - m[3],
    h = 800 - m[0] - m[2],
    i = 0;

   var w_start=0; 

  datasetpp.x0 = h / 2;
  datasetpp.y0 = 0;

  //var sizeww=datasetpp.length;

      var vis = d3.select("#viz").append("svg:svg")
        .attr("width", 900)
        .attr("height", 1200)
        //.append("svg:g");
        //.attr("transform", "translate(100, 0)");

      var labelx=1;
      var labely=1;
      var tree = d3.layout.tree()
        .size([labelx,labely]) ;
    //  .separation(function(a, b) { return 1  });
        /*
      var labelx=870;
      var labely=850;
      var tree = d3.layout.tree()
        .size([labelx,labely]) ;
*/

     //http://mbostock.github.io/d3/talk/20111018/tree.html

      var nodes = tree.nodes(datasetpp);


      var maxdepth=0;    

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

            //       console.log("diagonal=",diagonal);

   //=======================
    function toggleAll(d) 
    {
        if (d.children && d.depth>0) 
        {
            d.children.forEach(toggleAll);
            toggle(d);
        }

    }
   // Toggle children.
    function toggle(d) 
    {
        if (d.children) 
        {
            d._children = d.children;
            d.children = null;
        } 
        else 
        {
            d.children = d._children;
            d._children = null;
        }
    }         
    //==================
    function number_of_leaf(nodes)
    {
        var ret=0;
        //
        // for debug
        //

        if(nodes.children!= null) 
        {
            nodes.children.forEach(function(d)
                         {
                                 ret=number_of_leaf(d)+ret;
                           })
        }
        else
        {
            ret=1;
        }


        return ret;
    }
     /*
          var maxdepth=0;    
         nodes.forEach(function(d)
                               {
                                 if(d.depth>maxdepth)    
                                 {
                                    maxdepth=d.depth;
                                 }      
                               })
    */



   //--------------------------------------------------------------
   function update(source) 
   {
        //var duration = d3.event && d3.event.altKey ? 5000 : 500;
        var duration = 1000; 
        var i_step=0;
        var step_width=labely/number_of_leaf(datasetpp);

  // Compute the new tree layout.
        var nodes = tree.nodes(datasetpp).reverse();
         maxdepth=0;    
         nodes.forEach(function(d)
                               {
                                 if(d.depth>maxdepth)    
                                 {
                                    maxdepth=d.depth;
                                 }      
                               })
   //====================================================================
   //
   //
   //
   //=====================================================================
       var i_depth;
       var catigories_max_label_width=new Array(maxdepth+1);
       var catigories_max_label_height=0;
       var current_label_width;
       var current_label_height;
       var max_label_height=0;
       for(i_depth=0;i_depth<maxdepth+1;i_depth++)
       {
         catigories_max_label_width[i_depth]=0;  //catigories[i_depth,i_cat]  
       }
       var w=window.innerWidth;
       var h=window.innerHeight;
       var svg_test=hist_div.append("svg").attr("width",  w).attr("height", h);

       nodes.forEach(function(d)
            {
                   var i_depth=d.depth;
                   var text_test;

                   if(small===0)
                   {
                        text_test = svg_test.append('text').attr('class', 'text_small')
                                .text(d.name)
                   }                
                   else
                   {
                       text_test = svg_test.append('text').attr('class', 'text_big')
                                .text(d.name)
                    }


                   //catigories_max_label_width[i_depth,i_cat]  
                   text_test.each(function() {
                        var tmpbox=this.getBBox();
                        current_label_width=tmpbox.width;
                        if(current_label_width>catigories_max_label_width[i_depth])
                        {
                            catigories_max_label_width[i_depth]=current_label_width;
                        }
                     //
                        current_label_height=tmpbox.height;
                        if(current_label_height>catigories_max_label_height)
                        {
                            catigories_max_label_height=current_label_height;
                        }                     
                  });
            });
         catigories_max_label_height=catigories_max_label_height*1.6;
         w_start=0; 
         for(i_depth=0;i_depth<maxdepth+1;i_depth++)
         {
            w_start=w_start+catigories_max_label_width[i_depth]+text_move;  //catigories[i_depth,i_cat]  
         }
         w_start=tick_witdh+w_start;
         svg_test.remove();
   //====================================================================
   //
   //
   //
   //=====================================================================

  // Normalize for fixed-depth.
        nodes.forEach(function(d) { 
            //
            var numf=number_of_leaf(d);
            if(numf===1)
            {
                i_step++;
                d.x=i_step*catigories_max_label_height;
            }
            else
            {
                d.x=i_step*catigories_max_label_height-(numf-1)*catigories_max_label_height/2;
            }

            var rt=d.name;
    //  d.y = (d.depth)* 180; 
        //  d.y =catigories_max_label_width[d.depth];
            var i_depth;
            var sum=0;
            for(i_depth=0;i_depth<d.depth+1;i_depth++)
            {
                    sum=catigories_max_label_width[i_depth]+sum+text_move;
            }
            d.y =sum;

            //
         });

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

 var node_hist = vis.selectAll(".hist")
      .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("transform", function(d) { 
        var ret="translate(" + source.y0 + "," + source.x0 + ")"; 
        return ret;
        })
      .on("click", function(d) { 
        toggle(d);
         update(d);
          });


    var nodeEnter_hist = node_hist.enter().append("circle") 
      .attr("class", function(d,i) { 
                    var ret="hist";
                    if(d.children!= null)
                    {
                        ret="temporary";
                    }                   
                    return ret;
            }) 
       .attr("r", 5) /* function(d,i) { 
                    var ret=5;
                    if(d.children!= null)
                    {
                        ret=1e-6;
                    }                   
                    return ret;
            }) */
      .attr("cx",function(d) { 
                    return source.y0;//w_start;
                  })
      .attr("cy", function(d) { 
                    return  source.x0;
            })
       .attr("fill","green")

    vis.selectAll(".temporary").remove();

    nodeEnter_hist.transition()
      .duration(duration)
      .attr("cx",function(d) { 
                    return w_start;
                  })
      .attr("cy", function(d) { 
                    return  d.x;
            })





  nodeEnter.append("svg:circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
      .style("cursor", function(d) {
                var ret="default";
                if(d.children != null )                 
                {
                    ret="pointer";
                }
            return ret;
         });

  if(small===0)
    {
  nodeEnter.append("svg:text")
      .attr("x", function(d) { 
        return -text_move;
      //    return d.children || d._children ? -10 : 10; 
        })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { 
         return "end";
        //return d.children || d._children ? "end" : "start"; 
        })
      .text(function(d) { return d.name; })
       .style("font-size", "11px")
      .style("fill-opacity", 1e-6);
     }
     else
     {
          nodeEnter.append("svg:text")
      .attr("x", function(d) { 
        return -text_move;
      //    return d.children || d._children ? -10 : 10; 
        })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { 
         return "end";
        //return d.children || d._children ? "end" : "start"; 
        })
      .text(function(d) { return d.name; })
       .style("font-size", "16px")
      .style("fill-opacity", 1e-6);
     }



  /*
   if(small===0)
    {
        nodeEnter.attr("font-family", "sans-serif")
              .attr("font-size", "11px")
              .attr("fill","black")
    }               
    else
    {
        nodeEnter.attr("font-family", "sans-serif")
              .attr("font-size", "19px")
              .attr("fill","black")
    }
*/

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

  var nodeUpdate_hist = node_hist
            .attr("class", function(d,i) { 
                    var ret="hist";
                    if(d.children!= null)
                    {
                        ret="temporary";
                    }                   
                    return ret;
            }) 
      .transition()
      .duration(duration)
      .attr("cx",function(d) { 
                    return w_start;
                  })
      .attr("cy", function(d) { 
                    return  d.x;
            })



         vis.selectAll(".temporary").transition()
      .duration(duration)
      .attr("cx",function(d) { 
                    return source.y;//w_start;
                  })
      .attr("cy", function(d) { 
                    return  source.x;
            })
      .remove();

  nodeUpdate.select("circle")
      .attr("r", 
        function(d) { 
                    var ret=4.5;
                    if(d.depth==0)
                    {
                        ret=1e-6;
                    }
                    return ret;
            })

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

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

var node_histExit=node_hist.exit().transition()
      .duration(duration)
      .attr("cx",function(d) { 
                    return source.y;//w_start;
                  })
      .attr("cy", function(d) { 
                    return  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")
           .style("opacity",  function(d) { 
                    var ret=1;
                    if(d.source.depth==0)
                    {
                        ret=0;
                    }
                    return ret;
            })
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
       return diagonal({source: o, target: o});
      })
    .transition()
      .duration(duration)
      .attr("d", diagonal);



//
//
//-----------------------------------------------------------------------------
/*
      var datasetq3 = [ 500];
  vis.selectAll("tt").data(datasetq3).enter().append("circle") 
      .attr("r",20)
      .attr("cx",150)
      .attr("cy",150);
*/









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


  //   datasetpp.children.forEach(toggleAll);

 //     toggle(datasetpp.children[2]);

  //    toggle(datasetpp.children[1].children[2]);

      update(datasetpp);     
      var ret=number_of_leaf(datasetpp);
    </script>
  </body>
</html>
于 2013-04-09T10:16:39.867 回答