6 changed files with 173 additions and 3 deletions
@ -0,0 +1,143 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<title>Tree Diagram with Tooltips</title> |
||||
|
<style> |
||||
|
.card { |
||||
|
fill: #fff; |
||||
|
stroke: steelblue; |
||||
|
stroke-width: 3px; |
||||
|
width: 120px; |
||||
|
height: 50px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.card text { |
||||
|
font-size: 14px; |
||||
|
font-family: sans-serif; |
||||
|
} |
||||
|
|
||||
|
.tooltip { |
||||
|
position: absolute; |
||||
|
text-align: center; |
||||
|
padding: 10px; |
||||
|
font-size: 14px; |
||||
|
font-family: sans-serif; |
||||
|
background-color: #f0f0f0; |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 5px; |
||||
|
pointer-events: none; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.link { |
||||
|
fill: none; |
||||
|
stroke: #ccc; |
||||
|
stroke-width: 2px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="tree"></div> |
||||
|
<script src="https://d3js.org/d3.v5.min.js"></script> |
||||
|
<script> |
||||
|
// 树形结构数据 |
||||
|
// var treeData = { |
||||
|
// "name": "Root", |
||||
|
// "children": [ |
||||
|
// { |
||||
|
// "name": "Node 1", |
||||
|
// "children": [ |
||||
|
// {"name": "Leaf 1"}, |
||||
|
// ] |
||||
|
// }, |
||||
|
// { |
||||
|
// "name": "Node 2", |
||||
|
// "children": [ |
||||
|
// {"name": "Leaf 1"} |
||||
|
// ] |
||||
|
// } |
||||
|
// ] |
||||
|
// }; |
||||
|
var treeData = { |
||||
|
"name": "Root", |
||||
|
"children": [ |
||||
|
{ |
||||
|
"name": "Node 1", |
||||
|
"children": [ |
||||
|
{"name": "Leaf 1"}, |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
// 定义画布大小和边距 |
||||
|
var margin = {top: 20, right: 120, bottom: 20, left: 120}, |
||||
|
width = 600 - margin.right - margin.left, |
||||
|
height = 300 - margin.top - margin.bottom; |
||||
|
|
||||
|
// 定义树形布局 |
||||
|
var treemap = d3.tree() |
||||
|
.size([height, width]); |
||||
|
|
||||
|
// 为数据设置层级关系 |
||||
|
var root = d3.hierarchy(treeData); |
||||
|
|
||||
|
// 计算节点位置 |
||||
|
treemap(root); |
||||
|
|
||||
|
// 创建SVG画布 |
||||
|
var svg = d3.select("#tree") |
||||
|
.append("svg") |
||||
|
.attr("width", width + margin.right + margin.left) |
||||
|
.attr("height", height + margin.top + margin.bottom) |
||||
|
.append("g") |
||||
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
||||
|
|
||||
|
// 添加节点组 |
||||
|
var node = svg.selectAll(".node") |
||||
|
.data(root.descendants()) |
||||
|
.enter() |
||||
|
.append("g") |
||||
|
.attr("class", "node") |
||||
|
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) |
||||
|
.on("mouseover", function(d) { |
||||
|
tooltip.style("visibility", "visible"); |
||||
|
tooltip.text(d.data.name); |
||||
|
}) |
||||
|
.on("mousemove", function(d) { |
||||
|
tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); |
||||
|
}) |
||||
|
.on("mouseout", function(d) { |
||||
|
tooltip.style("visibility", "hidden"); |
||||
|
}); |
||||
|
|
||||
|
// 添加节点卡片 |
||||
|
node.append("rect") |
||||
|
.attr("class", "card"); |
||||
|
|
||||
|
// 添加节点标签 |
||||
|
node.append("text") |
||||
|
.attr("dy", 20) |
||||
|
.attr("dx", 6) |
||||
|
.text(function(d) { return d.data.name; }); |
||||
|
|
||||
|
// 添加连线 |
||||
|
var link = svg.selectAll(".link") |
||||
|
.data(root.links()) |
||||
|
.enter() |
||||
|
.append("path") |
||||
|
.attr("class", "link") |
||||
|
.attr("d", d3.linkHorizontal() |
||||
|
.x(function(d) { return d.y; }) |
||||
|
.y(function(d) { return d.x; })); |
||||
|
|
||||
|
// 添加提示框 |
||||
|
var tooltip = d3.select("body") |
||||
|
.append("div") |
||||
|
.attr("class", "tooltip"); |
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue