d3-study/svg.html at master · ranckprogram/d3-study · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="https://d3js.org/d3.v5.js"></script>

    <script>
        var data = {
            name: 'ranck', children: [{
                name: 'sofy'
            }, {
                name: 'qi'
            }]
        }
        margin = { left: 100, top: 100, right: 50, bottom: 50 }

        var root = d3.hierarchy(data)

        var tree = d3.tree().size([500, 222])

        tree(root)    // 这句很关键，可使数据中具有布局属性

        var svg = d3.select('body')
            .append('svg')
            .attr("width", 1211)
            .attr("height", 444)

        var g = svg.append("g").attr('transform', 'translate(' + margin.left + ',' + margin.right + ')');

        var node = g.selectAll('node').data(root.descendants()).enter().append('g')
            .attr("transform", function (d) {
                console.dir(d)
                return "translate(" + d.x + "," + d.y + ")";
            })

        var link = g.selectAll('.link').data(tree(root).links())
            .enter().append('path')
            .attr("stroke", "#ccc")
            .attr("fill", "none")
            .attr("d", d3.linkVertical().x(function (d) { return d.x; }).y(function (d) { return d.y; }));


        node.append('text').text(function (d) {
            return d.data.name
        })
    </script>
</body>

</html>