版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_23502409/article/details/81208445
<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>
更多文章请扫码关注公众号,有问题的小伙伴也可以公众号上提出哦