d3.js Add labels in Chord diagram

问题

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

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));

回答1:

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;");

来源：https://stackoverflow.com/questions/19513682/d3-js-add-labels-in-chord-diagram

标签

d3.js

label

chord-diagram