具有顺序刻度的水平图表，但不是纯平面名称>；树结构<； 我在一个项目的中间。该项目包括使用javascript和惊人的d3.js设计营销仪表板。 我需要一个有顺序刻度的水平图表，但是我没有纯平面的名字，而是有一个树状结构。 因此，我不是在设计文本，而是在为垂直标签设计一棵树。。。 要求：当最终用户单击一个节点时，所有对应的条折叠为一条（当然，该条的值是子条的总和）。为了成为直方图，所有条必须从相同的x开始。此外，垂直方向上钢筋之间的距离应相同
下面的“玩具”程序显示了上面的垂直标签。不幸的是，为了获得理想的布局，我添加了“虚拟节点”。这不是一个解决方案，因为我不知道如何使“节点折叠功能”。 谢谢你抽出时间具有顺序刻度的水平图表，但不是纯平面名称>；树结构<； 我在一个项目的中间。该项目包括使用javascript和惊人的d3.js设计营销仪表板。 我需要一个有顺序刻度的水平图表，但是我没有纯平面的名字，而是有一个树状结构。 因此，我不是在设计文本，而是在为垂直标签设计一棵树。。。 要求：当最终用户单击一个节点时，所有对应的条折叠为一条（当然，该条的值是子条的总和）。为了成为直方图，所有条必须从相同的x开始。此外，垂直方向上钢筋之间的距离应相同,javascript,svg,d3.js,Javascript,Svg,D3.js,下面的“玩具”程序显示了上面的垂直标签。不幸的是，为了获得理想的布局，我添加了“虚拟节点”。这不是一个解决方案，因为我不知道如何使“节点折叠功能”。 谢谢你抽出时间 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="d3/d3
<!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>
.节点{
字体：11px无衬线；
}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：1px；
}
var treeData={“name”：“c”：[150,5,4,0]，“children”：[
{“名称”：“超级特价”，“c”：[150,5,4,10]，“儿童”：[{“名称”：”，“c”：[150,5,4,0]，“儿童”：[{“名称”：”，“c”：[150,5,4,0]}]
，{“姓名”：“一揽子交易”，“c”：[50,15,4,20]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“姓名”：“音频和家庭影院”，“c”：[120,15,4,10]，“儿童”：[
{“姓名”：“扬声器包”，“c”：[45,15,5,23]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“姓名”：“便携式收音机”，“c”：[40,15,7,26]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“名称”：“放大器”，“c”：[51,15,4,26]，“子项”：[{“名称”：”，“c”：[150,5,4,0]}]
，{“姓名”：“附件”，“c”：[53,15,9,24]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“姓名”：“家庭影院系统”，“c”：[54,15,3,26]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“名称”：“高保真系统”，“c”：[56,15,4,27]，“儿童”：[{“名称”：”，“c”：[150,5,4,0]}]
]}
，{“姓名”：“电视和录像”，“c”：[130,55,8,10]，“儿童”：[
{“姓名”：“电视”，“c”：[51,15,4,26]，“儿童”：[
{“name”：“LED”，“c”：[45,15,5,23]}
，{“名称”：“血浆”，“c”：[40,15,7,26]}
，{name:“LCD”，“c:[51,15,4,26]}
]}
，{“姓名”：“播放器和录音机”，“c”：[45,15,5,23]，“儿童”：[
{“名称”：“Dvd播放机和录像机”，“c”：[45,15,5,23]}
，{“名称”：“蓝光播放器和录音机”，“c”：[40,15,7,26]}
]}
，{“名称”：“机顶盒和PVR”，“c”：[40,15,7,26]，“子项”：[{“名称”：”，“c”：[150,5,4,0]}]}
，{“姓名”：“附件”，“c”：[53,15,9,24]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
]}
，{“姓名”：“计算机与技术”，“c”：[140,66,4,4]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{name:“Whitegoods”，“c:[120,35,4,7]，“children:[150,5,4,0]，“children:[150,5,4,0]，“children:[150,5,4,0]，[c:[150,5,4,0]}]
，{“姓名”：“家具”，“c”：[50,25,12,9]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“姓名”：“烹饪”，“c”：[80,25,4,4]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“名称”：“加热和冷却”，“c”：[87,43,2,22]，“儿童”：[{“名称”：”，“c”：[150,5,4,0]，“儿童”：[{“名称”：”，“c”：[150,5,4,0]}]
，{“姓名”：“地板护理”，“c”：[78,15,4,12]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“姓名”：“小型电器”，“c”：[78,17,14,3]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“姓名”：“个人仪容”，“c”：[45,9,4,5]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]}]
，{“姓名”：“DIY安全”，“c”：[47,5,9,0]，“儿童”：[{“姓名”：”，“c”：[150,5,4,0]，“儿童”：[{“姓名”：“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.选择（#viz”）.追加（“
<!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>