1

I am new to this kind of chord visualization. I am working on a sample http://bl.ocks.org/mbostock/4062006:

enter image description here

I would like to add "black", "blonde","brown","red" as labels in the respective chord. How is this possible.

I tried something like this but is not working:

var textLabel = d3.scale.ordinal().range(['Black','Blonde','Brown','Red']);

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))
svg.append("g").append("svg:text")
    .attr("x", 6)
    .attr("dy", 15)
    .append("svg:textPath")
    .text(function(d,i) { return textLabel(i+1); })
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1));
VividD
  • 10,456
  • 6
  • 64
  • 111
krishna_v
  • 1,501
  • 5
  • 30
  • 60
  • Have you seen [this question](http://stackoverflow.com/questions/10557720/add-labels-to-d3-chord-diagram)? – Lars Kotthoff Oct 22 '13 at 09:16
  • Yes, based on that i tried to add textpath element but seems i have missed something. – krishna_v Oct 22 '13 at 09:22
  • BTW you can clean up that `if`/`else if` block by using a scale. `var textLabel = d3.scale.ordinal().range(['Black','Blonde','Brown','Red'])` then just `textLabel(i+1)` – Christopher Hackett Oct 22 '13 at 10:12
  • Christopher, i have replaced the code and saved the same, but still i am not able to display the text in the chord. – krishna_v Oct 22 '13 at 10:30

1 Answers1

2

You have forgotten to use the enter selection and also do not link the svg:textPath to an actual path in the SGV. To do this the path you want the text to follow needs to have been given an id attribute and you need to reference this in the textPath with an href attribute.

So you want to add the id attribute to the path you want the text to follow

.attr("id", function(d, i){return "group-" + i;})

You then want to do something like this to add textPath elements 

svg.append("g").selectAll("text")
        .data(chord.groups)
    .enter()
    .append("sgv:text")
        .attr("x", 6)
        .attr("dy", 15)
        .append("svg:textPath")
            .attr("xlink:href", function(d, i){return "#group-" + i;})
            .text(function(d,i) {return textLabel(i+1);});

Finally with the colour black you will probably want to invert the text so you don't end up with black on black text. 

            .filter(function(d, i){return i === 0 ? true : false;})
            .attr("style", "fill:white;");
Christopher Hackett
  • 6,042
  • 2
  • 31
  • 41