Graphics Reference
In-Depth Information
Insert the circle underneath the chord diagram and add the titles to the arcs
and chords to display quantitative values in a tooltip on hover, as shown in
function
visualize(imports, countries) {
// ...
// INTERACTIONS
var
formatValue = d3.format(
'$,f'
)
// Add an invisible circle underneath for hover
events to
// filter chords
svg.insert(
'circle'
,
':first-child'
).attr(
'r'
,
radius);
// Add a mouseover title for each group.
group.append(
'title'
).text(
function
(d, i) {
return
countries[i].CountryName +
': '
+
formatValue(d.value)
+
' in imports'
;
});
// Add a mouseover title for each chord.
chord.append(
'title'
).text(
function
(d) {
return
countries[d.source.index].CountryName +
' → '
+
countries[d.target.index].CountryName +
': '
+ formatValue(d.source.value) +
'\n'
+
countries[d.target.index].CountryName +
' → '
+
countries[d.source.index].CountryName +
': '
+ formatValue(d.target.value);
});
}
