Graphics Reference
In-Depth Information
// Add a label for each country...
var
groupText = group.append(
'text'
)
.attr(
'x'
, labelXOffset)
.attr(
'dy'
, labelYOffset);
// ...tailoring arc of text to available space.
groupText.append(
'textPath'
).attr(
'xlink:href'
,
function
(d, i) {
return
'#group'
+ i;
}).text(
function
(d, i) {
return
d.value > 300e9? countries[i].CountryName :
d.value > 100e9? countries[i].ISOCC3 :
d.value > 50e9? countries[i].ISOCC2 :
''
;
});
// ...
Next, add the chords. Use the color of the source country and a darker
version of the same for the outline color. The
layout
class will supply the
complex path geometry.
// ...
// Add the chords, coloring by source country
chord =
svg.selectAll(
'.chord'
).data(layout.chords).enter()
.append(
'path'
).attr(
'class'
,
'chord'
)
.attr(
'd'
,
d3.svg.chord().radius(innerRadius))
.style(
'fill'
,
function
(d) {
return
countryColor(d.source.index);
})
.style(
'stroke'
,
function
(d) {
return
countryColor(d.source.index, 0.25);
});
// ...
