Permalink
Browse files

Organize chord diagram logic by lifecycle selection

This transformation further increases the readability of the chart and
helps ensure that future modifications maintain a reasonable structure.
  • Loading branch information...
jugglinmike committed Mar 3, 2013
1 parent f9020e4 commit c745dc443296f5e94fb3a3902642e81c8b3354ee
Showing with 36 additions and 27 deletions.
  1. +36 −27 scripts/chord-diagram.js
View
@@ -15,60 +15,69 @@ window.Chord = function(options) {
var svg = d3.select("body").append("svg")
.append("g");
function chord(matrix) {
var chord = d3.layout.chord()
.padding(.05)
.sortSubgroups(d3.descending)
.matrix(matrix);
var handles = svg.append("g").selectAll("path")
.data(chord.groups);
var enteringHandles = handles.enter().append("path");
enteringHandles
.style("fill", function(d) { return fill(d.index); })
function onEnterHandles() {
this.style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); })
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.on("mouseover", fade(.1))
.on("mouseout", fade(1));
}
var ticks = svg.append("g").selectAll("g")
.data(chord.groups)
.enter().append("g").selectAll("g")
.data(groupTicks);
var enteringTicks = ticks.enter().append("g");
enteringTicks
.attr("transform", function(d) {
function onEnterTicks() {
this.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + outerRadius + ",0)";
});
enteringTicks.append("line")
this.append("line")
.attr("x1", 1)
.attr("y1", 0)
.attr("x2", 5)
.attr("y2", 0)
.style("stroke", "#000");
enteringTicks.append("text")
this.append("text")
.attr("x", 8)
.attr("dy", ".35em")
.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.text(function(d) { return d.label; });
}
function onEnterChords() {
this.attr("d", d3.svg.chord().radius(innerRadius))
.style("fill", function(d) { return fill(d.target.index); })
.style("opacity", 1);
}
function chord(matrix) {
var chord = d3.layout.chord()
.padding(.05)
.sortSubgroups(d3.descending)
.matrix(matrix);
var handles = svg.append("g").selectAll("path")
.data(chord.groups);
var enteringHandles = handles.enter().append("path");
enteringHandles.call(onEnterHandles);
var ticks = svg.append("g").selectAll("g")
.data(chord.groups)
.enter().append("g").selectAll("g")
.data(groupTicks);
var enteringTicks = ticks.enter().append("g");
enteringTicks.call(onEnterTicks);
var chords = svg.append("g")
.attr("class", "chord")
.selectAll("path")
.data(chord.chords);
var enteringChords = chords.enter().append("path");
enteringChords
.attr("d", d3.svg.chord().radius(innerRadius))
.style("fill", function(d) { return fill(d.target.index); })
.style("opacity", 1);
enteringChords.call(onEnterChords);
}

0 comments on commit c745dc4

Please sign in to comment.