tutoriel-d3js-force-layout/tutoriel_D3_force2.js at master · fluidlog/tutoriel-d3js-force-layout · 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
var dataset = {
		dataset_nodes: [
                { id : "0", name: "D3JS" },
                { id : "1", name: "Tutoriel" },
                { id : "2", name: "Drag" },
        ],
        dataset_links: [
                { source: 0, target: 1 },
                { source: 0, target: 2 },
        ]
};

var svg = d3.select("#chart")
			.append("svg")
			.attr("width", 300)
			.attr("height", 300);

var force = d3.layout.force()
	                 .nodes(dataset.dataset_nodes)
	                 .links(dataset.dataset_links)
	                 .size([300, 300])
	                 .linkDistance([100])

var links = svg.selectAll("line")
			.data(dataset.dataset_links)
			.enter()
			.append("line")
			.style("stroke", "steelblue")
			.style("stroke-width", 3);

var nodes = svg.selectAll("circle")
        .data(dataset.dataset_nodes)
        .enter()
        .append("circle")
        .attr("r", 20)
        .style("fill", "white")
        .style("stroke", "steelblue")
		.style("stroke-width", 3)
		.call(force.drag);

force.start();

//Attention : pour que le drag fonctionne, il faut
//passer une fonction interne
//Il y a plus simle, mais je trouve ça plus maintenable...
force.on("tick", function(d) {return tick()} )

function tick()
{
	links.attr("x1", function(d) { return d.source.x; })
	     .attr("y1", function(d) { return d.source.y; })
	     .attr("x2", function(d) { return d.target.x; })
	     .attr("y2", function(d) { return d.target.y; });

	nodes.attr("cx", function(d) { return d.x; })
    	 .attr("cy", function(d) { return d.y; });
}