当前位置:网站首页>D3.JS 纵向关系图(加箭头,连接线文字描述)
D3.JS 纵向关系图(加箭头,连接线文字描述)
2022-07-29 05:20:00 【Denny辉】
<script src="d3.js"></script>
<style>
.node {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
<script>
var width = 1100,
height = 700;
var cluster = d3.layout.tree()
.size([width, height - 200]);
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.x, d.y];
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + 612 + "," + 50 + ")");
//箭头
var marker =
svg.append("marker")
.attr("id", "resolved")
.attr("markerUnits", "strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
.attr("markerUnits", "userSpaceOnUse")
.attr("viewBox", "0 -5 10 10")//坐标系的区域
.attr("refX", 10)//箭头坐标
.attr("refY", -1)
.attr("markerWidth", 12)//标识的大小
.attr("markerHeight", 12)
.attr("orient", "auto")//绘制方向,可设定为:auto(自动确认方向)和 角度值
.attr("stroke-width", 2)//箭头宽度
.append("path")
.attr("d", "M0,-5L10,0L0,5")//箭头的路径
.attr('fill', '#000000');//箭头颜色
var root = {
"name": "中国",
"number": "2000",
"children":
[
{
"name": "浙江",
"number": "100",
"children":
[
{
"name": "杭州",
"number": "100"
},
{
"name": "宁波",
"number": "200"
}
]
},
{
"name": "广西",
"number": "500",
"children":
[
{
"name": "桂林",
"number": "100"
},
{
"name": "南宁",
"number": "200"
}
]
},
{
"name": "黑龙江",
"number": "500",
"children":
[
{
"name": "哈尔滨",
"number": "100"
}
]
},
{
"name": "新疆",
"number": "500",
"children":
[
{
"name": "乌鲁木齐",
"number": "100"
}
]
}]
}
var i = 0;
var nodes = cluster.nodes(root).reverse();
nodes.forEach(function (d) { d.y = d.depth * 200; });
var links = cluster.links(nodes);
var linkEnter = svg.selectAll("path.link")
.data(links);
linkEnter.enter().append("path")//在指定元素之前插入一个元素
.attr("class", "link")
.attr("d", diagonal)
.attr("stroke", "white")
.attr("marker-end", "url(#resolved)")//根据箭头标记的id号标记箭头
.style("fill", "white")
.style("fill-opacity", 1)
// 首先为每条节点连线添加标识id
.attr("id", function (d, i) {
return "mypath" + i;
});
//为连线添加文字
linkEnter.enter().append('text')
.attr('x', 100)
.attr('y', 80)
.style('fill', 'green')
.style('font-size', '15px')
.style('font-weight', 'bold')
.append('textPath')
.attr({//引用路径
'xlink:href': function (d, i) {
return "#mypath" + i;
}
})
.text(function (d, i) {
debugger
return d.target.number
});
var node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + (d.x + -50) + "," + (d.y) + ")";
})
node.append("rect")
.attr("width", 100)
.attr("height", 40)
.attr("x", 0)
.attr("y", 0)
.attr("style", "fill:#2990ca;")
.attr("rx", 3);
node.append("text")
.attr("dx", function (d) {
return 30;
})
.attr("dy", 25)
.style("text-anchor", function (d) {
return "middle";
})
.style("fill", "#fff")
.text(function (d) { return d.name; });
node.append("text")
.attr("dx", function (d) {
return 70;
})
.attr("dy", 25)
.style("text-anchor", function (d) {
return "middle";
})
.style("fill", "#fff")
.text(function (d) { return d.number; });
</script>
更多文章请扫码关注公众号,有问题的小伙伴也可以公众号上提出哦
边栏推荐
猜你喜欢
裸金属云FASS高性能弹性块存储解决方案
MOVE PROTOCOL全球健康宣言,将健康运动进行到底
Refresh, swagger UI theme changes
Wapiti是什么以及使用教程
Qt布局管理--部件拉伸(Stretch)原理及大小策略(sizePolicy)
The bear market is slow, and bit.store provides stable stacking products to help you get through the bull and bear market
Go|Gin 快速使用Swagger
How can Plato obtain premium income through elephant swap in a bear market?
第五空间智能安全⼤赛真题----------PNG图⽚转换器
“山东大学移动互联网开发技术教学网站建设”项目实训日志五
随机推荐
使用Qss设置窗体样式
完全去中心化的编程模式,不需要服务器,也不需要ip,就像一张漫无目的的网络、四处延伸
深度学习的趣味app简单优化(适合新手)
Crypto巨头们ALL IN元宇宙,PlatoFarm或能突围
PHP如何生成二维码?
Sports health is deeply rooted in the hearts of the people, and move protocol leads quality life
Laravel service container (Application of context binding)
熊市下PLATO如何通过Elephant Swap,获得溢价收益?
Build msys2 environment with win10
识变!应变!求变!
Hcia-r & s self use notes (26) PPP
Wapiti是什么以及使用教程
与多家机构战略合作,背后彰显PlatoFarm元宇宙龙头的实力
以‘智’提‘质|金融影像平台解决方案
麦当娜“Hellbent”购买130万美元的nft无聊猿,现在被认为太贵了
QPalette学习笔记
win10+opencv3.2+vs2015配置
Fantom (FTM) 价格将在未来几天飙升 20%
Print out all prime numbers between 1-100
超简单集成HMS ML Kit 人脸检测实现可爱贴纸