d3.js在弦图中添加标签

我对这种和弦想象还不熟悉。我正在制作一个样本：

我想在相应的和弦中添加“黑色”、“金色”、“棕色”、“红色”作为标签。这怎么可能

我尝试过类似的方法，但不起作用：

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

---

您忘记了使用

enter

选项，也没有将

svg:textPath

链接到SGV中的实际路径。要做到这一点，您希望文本遵循的路径需要具有

id

属性，并且您需要在

textPath

中使用

href

属性引用该路径

因此，您希望将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;");

---

你看到了吗？是的，基于此，我尝试添加textpath元素，但似乎遗漏了一些内容。顺便说一句，你可以使用刻度清除

if

/

if

块

var textLabel=d3.scale.ordinal（）.range（['Black'、'Blonde'、'Brown'、'Red']）

textLabel（i+1）Christopher，我已经替换了代码并保存了相同的代码，但仍然无法在和弦中显示文本。效果非常好。