d3.js - d3.js Add labels in Chord diagram

Question

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

Answer 1

您忘记使用enter选择，也没有链接svg:textPath到 SGV 中的实际路径。为此，您希望文本遵循的路径需要被赋予一个属性id，并且您需要在属性中引用它。textPathhref

因此，您想将 id 属性添加到您希望文本遵循的路径

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

然后你想做这样的事情来添加 textPath 元素

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

最后使用黑色，您可能想要反转文本，这样您就不会在黑色文本上出现黑色。

            .filter(function(d, i){return i === 0 ? true : false;})
            .attr("style", "fill:white;");