diagnostics/d3: Added link highlighting
Matt Bell committed
Jan 14, 2015 at 11:48 UTC
01cca5bfe23c1a999ec32299a5ec54806fe1289f
1 file changed
+38
-16
diagnostics/d3/chord.html
+38
-16
@@ -2,12 +2,19 @@
2
<meta charset="utf-8">
3
<style>
4
5
-body {
5
+.node {
6
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
7
}
8
+.node:hover circle {
9
+ stroke: red;
10
+ stroke-width: 4px;
11
+}
12
9
-.node {
10
- font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
13
+.node .link {
14
+ stroke-width: 0;
15
+}
16
+.node:hover .link {
17
+ stroke-width: 4px;
18
}
19
20
.link {
@@ -67,20 +74,14 @@ d3.json(hash, function(error, data) {
74
.data(graph.nodes)
75
.enter().append("g")
76
.attr("class", "node")
70
- .attr("transform", function(d) { return "rotate(" + (d.x - 90 + rotate) + ")translate(" + d.y + ")"; })
77
+
78
+ var p = projection
79
80
node.append("svg:circle")
73
- .attr("r", function(d) { return d.conns + 3; })
81
+ .attr("r", function(d) { return d.conns + 2; })
82
.style("fill", function(d, i) { return color(i % 20); })
83
+ .attr("transform", function(d) { return "rotate(" + (d.x - 90 + rotate) + ")translate(" + d.y + ")"; })
84
76
- node.append("text")
77
- .attr("dx", function(d) { return 8; })
78
- .attr("dy", ".31em")
79
- // .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
80
- // .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
81
- .text(function(d) { return d.conns + " - " + d.name; });
82
-
83
- var p = projection
85
var link = svg.selectAll(".link")
86
.data(graph.paths)
87
.enter().append("path")
@@ -90,9 +91,26 @@ d3.json(hash, function(error, data) {
91
+ "S" + p(d[1])[0] + "," + p(d[1])[1]
92
+ " " + p(d[2])[0] + "," + p(d[2])[1];
93
})
93
- .style("stroke", function(d) { return color(d[0].index % 20); })
94
- .style("stroke-opacity", function(d) { return 0.3; })
94
95
+ node.selectAll('.link')
96
+ .data(function(d) { return d.links })
97
+ .enter().append('path')
98
+ .attr('class', 'link')
99
+ .style("stroke", function(d) { return color(d.source.index % 20); })
100
+ .attr("d", function(d) {
101
+ return "M" + p(d.path[0])[0] + "," + p(d.path[0])[1]
102
+ + "S" + p(d.path[1])[0] + "," + p(d.path[1])[1]
103
+ + " " + p(d.path[2])[0] + "," + p(d.path[2])[1];
104
+ })
105
+
106
+ node.append("text")
107
+ .attr("class", "label")
108
+ .attr("dx", -4)
109
+ .attr("dy", 3)
110
+ // .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
111
+ // .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
112
+ .text(function(d) { return d.conns + " - " + d.name; })
113
+ .attr("transform", function(d) { return "rotate(" + (d.x - 90 + rotate) + ")translate(" + d.y + ")"; })
114
115
// var mid = svg.selectAll(".node-mid")
116
// .data(graph.mids)
@@ -126,9 +144,10 @@ function parseGraph(graph2) {
144
data.y = innerRadius
145
data.x = ((360 / graph2.nodes.length) * i)
146
data.conns = 0
129
- data.index = i
147
graph.nodes.push(data)
148
graph.byName[data.name] = data
149
+ data.index = i
150
+ data.links = []
151
})
152
153
graph2.links.forEach(function(link) {
@@ -147,6 +166,9 @@ function parseGraph(graph2) {
166
167
var path = [source, mid, target]
168
graph.paths.push(path)
169
+
170
+ source.links.push({path: path, source: source})
171
+ target.links.push({path: path, source: target})
172
})
173
174
document.getElementById("node-count").innerText = graph.nodes.length