我正在进行一个项目。该项目包括使用 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>