javascript - A horizontal chart with Ordinal scale yscale, but instead of pure flat names > a tree structure< -
i in middle of project. project include design of marketing dashboard using javascript , amazing d3.js. need horizontal chart ordinal scale, instead of pure flat name have tree structure. instead of text design tree vertical labels... requirement : when end user click on 1 node corresponded bar(s) collapse 1 bar (off course value of bar sum of children bars.) in order histogram, bars must start same x. distance bar bar, in vertical direction, should same.
the following “toy” program shows above vertical label out . unfortunately in order achieve desirable layout have added “dummy node” . not solution because cannot figure out, how make “node collapse function”. thank time.
<!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 , 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>
finally have solved it. if 1 need it, code. in place of green circle put histograms bars.
<!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; } /* * remnoved after merge test19.html */ /* * style 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 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 bug in getbbox width. "blu-ray players , recorders" returns letter smaller width 11px san-serif // remnoved after merge 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 , 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], = 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; // // 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 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 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 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 new nodes @ 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 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 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 links… var link = vis.selectall("path.link") .data(tree.links(nodes), function(d) { return d.target.id; }); // enter new links @ 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 new position. link.transition() .duration(duration) .attr("d", diagonal); // transition exiting nodes 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 old positions 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>
Comments
Post a Comment