1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| <!DOCTYPE html>
| <html>
| <head>
| <title>家族关系思维导图</title>
| <script src="https://d3js.org/d3.v7.min.js"></script>
| <style>
| .node circle {
| fill: #fff;
| stroke: steelblue;
| stroke-width: 1.5px;
| }
| .node image {
| width: 40px;
| height: 40px;
| clip-path: circle(20px at center);
| }
| .node text {
| font-size: 14px;
| text-anchor: middle;
| fill: black;
| }
| .link {
| fill: none;
| stroke: #ccc;
| stroke-width: 1.5px;
| }
| </style>
| </head>
| <body>
| <div id="mindmap"></div>
| <script>
|
| function drawMindMap(data) {
|
| }
| var svg = d3.select("#mindmap"),
| width = svg.attr("width"),
| height = svg.attr("height"),
| tree = d3.tree().size([width, height]),
| root = d3.hierarchy(data);
|
| var link = svg.selectAll(".link")
| .data(tree(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 node = svg.selectAll(".node")
| .data(root.descendants())
| .enter().append("g")
| .attr("class", "node")
| .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
|
| // 添加头像图像
| node.append("circle")
| .attr("r", 20);
|
| node.append("image")
| .attr("xlink:href", function(d) { return d.data.avatarUrl; }) // 头像图片 URL 从 JSON 数据中获取
| .attr("x", -20)
| .attr("y", -20)
| .attr("width", 40)
| .attr("height", 40);
|
| node.append("text")
| .attr("dy", ".31em")
| .attr("y", 35)
| .style("text-anchor", "middle")
| .text(function(d) { return d.data.name; });
| }
| </script>
| </body>
| </html>
|
|
