d3_examples/example.html at master · mmahnken/d3_examples · 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<head>
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <div>
        <h1>Welcome to an example of d3.js</h1>
        <p>Not too much going on in the body, besides a bunch of JavaScript stuff.</p>
    </div>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script>


        d3.csv("force.csv", function(error, links) {

            var nodes = {};

            // Compute the distinct nodes from the links.
            links.forEach(function(link) {
                link.source = nodes[link.source] ||
                    (nodes[link.source] = {name: link.source, source: link.source});
                link.target = nodes[link.target] ||
                    (nodes[link.target] = {name: link.target, source: link.source.name});
                link.value = +link.value;
            });

            console.log(links);
            console.log(nodes);

            var width = 960,
                height = 500;

            var force = d3.layout.force()
                .nodes(d3.values(nodes))
                .links(links)
                .size([width, height])
                .linkDistance(60)
                .charge(-300)
                .on("tick", tick)
                .start();

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);


            // add the links and the arrows
            var path = svg.append("svg:g").selectAll("path")
                .data(force.links())
                .enter().append("svg:path")
                .attr("class", "link");


            // define the nodes
            var node = svg.selectAll(".node")
                .data(force.nodes())
                .enter().append("g")
                .attr("class", "node")
                .call(force.drag);

            var color = d3.scale.category20();

            node.append("circle")
                .attr("r", 5);
                // .style("fill", function(d) { return color(d.source); });


            // add the text
            node.append("text")
                .attr("x", 12)
                .attr("dy", ".35em")
                .text(function(d) { return d.name; });


            // "schproing!"
            function tick() {
                path.attr("d", function(d) {
                    var dx = d.target.x - d.source.x,
                        dy = d.target.y - d.source.y,
                        dr = Math.sqrt(dx * dx + dy * dy);
                    return "M" +
                        d.source.x + "," +
                        d.source.y + "A" +
                        dr + "," + dr + " 0 0,1 " +
                        d.target.x + "," +
                        d.target.y;
                });

                node
                    .attr("transform", function(d) {
                    return "translate(" + d.x + "," + d.y + ")"; });
            }

        });

    </script>
</body>
</html>