d3.js tree垂直树状图
d3.js画垂直树状图
想在根结点、第一层结点是水平的展示 第一层之上的结点想要垂直展示
相关代码
在网上找到的实例是水平的。
//创建一个贝塞尔生成曲线生成器
var Bézier_curve_generator = d3.linkHorizontal()
.x(function(d) { return d.y; })
.y(function(d) { return d.x; });
想要改成
var Bézier_curve_generator = d3.linkVertical()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
但是 在结点与线 还是不太知道怎么改。
<!DOCTYPE html>
<html>
<head>
<title>testD3_chp15_1.html</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
</script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<svg width="960" height="600"></svg>
<script>
//定义边界
var marge = {top:50, bottom:0, left:10, right:0};
var svg = d3.select("svg");
var width = svg.attr("width");
var height = svg.attr("height");
var g = svg.append("g")
.attr("transform","translate("+marge.top+","+marge.left+")");
var scale = svg.append("g")
.attr("transform","translate("+marge.top+","+marge.left+")");
//数据
var dataset = {
name:"中国",
children:[
{
name:"浙江",
children:[
{name:"杭州" ,value:100},
{name:"宁波",value:100},
{name:"温州",value:100},
{name:"绍兴",value:100}
]
},
{
name:"广西",
children:[
{
name:"桂林",
children:[
{name:"秀峰区",value:100},
{name:"叠彩区",value:100},
{name:"象山区",value:100},
{name:"七星区",value:100}
]
},
{name:"南宁",value:100},
{name:"柳州",value:100},
{name:"防城港",value:100}
]
},
{
name:"黑龙江",
children:[
{name:"哈尔滨",value:100},
{name:"齐齐哈尔",value:100},
{name:"牡丹江",value:100},
{name:"大庆",value:100}
]
},
{
name:"新疆" ,
children:
[
{name:"乌鲁木齐"},
{name:"克拉玛依"},
{name:"吐鲁番"},
{name:"哈密"}
]
}
]
};
//创建一个hierarchy layout
var hierarchyData = d3.hierarchy(dataset)
.sum(function(d){
return d.value;
});
//创建一个树状图
var tree = d3.tree()
.size([width-400,height-200])
.separation(function(a,b){
return (a.parent==b.parent?1:2)/a.depth;
})
//初始化树状图，也就是传入数据,并得到绘制树基本数据
var treeData = tree(hierarchyData);
console.log(treeData);
//得到节点
var nodes = treeData.descendants();
var links = treeData.links();
//输出节点和边
console.log(nodes);
console.log(links);
//创建一个贝塞尔生成曲线生成器经
var Bézier_curve_generator = d3.linkVertical()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
//有了节点和边集的数据后，我们就可以开始绘制了，
//绘制边
g.append("g")
.selectAll("path")
.data(links)
.enter()
.append("path")
.attr("d",function(d){
var start = {x:d.source.x,y:d.source.y};
var end = {x:d.target.x,y:d.target.y};
return Bézier_curve_generator({source:start,target:end});
})
.attr("fill","none")
.attr("stroke","yellow")
.attr("stroke-width",1);
//绘制节点和文字
//老规矩，先创建用以绘制每个节点和对应文字的分组<g>
var gs = g.append("g")
.selectAll("g")
.data(nodes)
.enter()
.append("g")
.attr("transform",function(d){
var cx = d.x;
var cy= d.y;
return "translate("+cy+","+cx+")";
});
//绘制节点
gs.append("circle")
.attr("r",6)
.attr("fill","white")
.attr("stroke","blue")
.attr("stroke-width",1);
//文字
gs.append("text")
.attr("x",function(d){
return d.children?-40:8;
})
.attr("y",-5)
.attr("dy",10)
.text(function(d){
return d.data.name;
});
</script>
</body>
</html>
我期待的结果是
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我目前也遇到这个问题，想问下您后来解决了吗？