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
102
103
104
105
106
107
108
109
110
111
| | var outerRadius = (nodeArray.length * 10) / 2,
innerRadius = outerRadius - 100,
width = outerRadius * 2,
height = outerRadius * 2,
colors = d3.scale.category20c(),
matrix = [];
function neighborsOf (node) {
return links.filter(function (e) {
return e.source === node;
}).map(function (e) {
return e.target;
});
}
function zoomed () {
zoomer.attr("transform",
"translate(" + d3.event.translate + ")" +
"scale(" + d3.event.scale + ")");
}
function fade (opacity, root) {
return function (g, i) {
root.selectAll("g path.chord")
.filter(function (d) {
return d.source.index != i && d.target.index != i;
})
.transition()
.style("opacity", opacity);
};
}
// Now that we have all nodes in an object we can replace each reference
// with the actual node object.
links.forEach(function (link) {
link.target = nodes[link.target];
link.source = nodes[link.source];
});
// Construct a square matrix for package dependencies
nodeArray.forEach(function (d, index, arr) {
var source = index,
row = matrix[source];
if (!row) {
row = matrix[source] = [];
for (var i = -1; ++i < arr.length;) row[i] = 0;
}
neighborsOf(d).forEach(function (d) { row[d.index]++; });
});
// chord layout
var chord = d3.layout.chord()
.padding(0.01)
.sortSubgroups(d3.descending)
.sortChords(d3.descending)
.matrix(matrix);
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(innerRadius + 20);
var zoom = d3.behavior.zoom()
.scaleExtent([0.1, 10])
.on("zoom", zoomed);
var svg = d3.select("body").append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
.attr('preserveAspectRatio','xMinYMin')
.call(zoom);
var zoomer = svg.append("g");
var container = zoomer.append("g")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
// Group for arcs and labels
var g = container.selectAll(".group")
.data(chord.groups)
.enter().append("g")
.attr("class", "group")
.on("mouseout", fade(1, container))
.on("mouseover", fade(0.1, container));
// Draw one segment per package
g.append("path")
.style("fill", function (d) { return colors(d.index); })
.style("stroke", function (d) { return colors(d.index); })
.attr("d", arc);
// Add circular labels
g.append("text")
.each(function (d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("transform", function (d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (innerRadius + 26) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");
})
.style("text-anchor", function (d) { return d.angle > Math.PI ? "end" : null; })
.text(function (d) { return nodeArray[d.index].label; });
// Draw chords from source to target; color by source.
container.selectAll(".chord")
.data(chord.chords)
.enter().append("path")
.attr("class", "chord")
.style("stroke", function (d) { return d3.rgb(colors(d.source.index)).darker(); })
.style("fill", function (d) { return colors(d.source.index); })
.attr("d", d3.svg.chord().radius(innerRadius));
|