Add labels to D3 Chord diagram

Question

I\'m a rookie programmer, so this one will probably be an easy one for most of you. What lines of code do I need for labels and/or mouse-over text for this Chord diagram?

<

Answer 1

You need to look at the (selection.on()) event handler in the d3.js wiki on Github. That shows you how to add events to elements including mouseover and mouseout. If you look at that example you linked to, you can see an instance of it already:

svg.append("g")
  .selectAll("path")
    .data(chord.groups)
.enter().append("path")
  .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));

If you hover the mouse over the chord groups in the outer ring you will see all the other chord groups fade out.

If you want labels to pop-up that contain strings (text) you will need to define them using another JS library. One I know that works is Tipsyand there is an example using it together with d3 here. You should then be able to simply use a selector to choose which SVG element you want to illustrate this behavior.

Hope that helps.

Answer 2

Add text elements to display labels. Alternatively, use textPath elements if you want to display text along a path. Two examples of labeled chord diagrams:

• http://mbostock.github.com/d3/talk/20111018/chord.html
• http://bl.ocks.org/1308257