d3.js 在和弦图中添加标签答案

【问题标题】：d3.js Add labels in Chord diagramd3.js 在和弦图中添加标签
【发布时间】：2013-10-31 01:49:46
【问题描述】：

我是这种和弦可视化的新手。我正在处理一个样本http://bl.ocks.org/mbostock/4062006：

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

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

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

【问题讨论】：

你见过this question吗？
是的，基于此，我尝试添加 textpath 元素，但似乎我错过了一些东西。
顺便说一句，您可以使用比例清理 if/else if 块。 var textLabel = d3.scale.ordinal().range(['Black','Blonde','Brown','Red']) 然后只是 textLabel(i+1)
Christopher，我已经替换了代码并保存了相同的代码，但我仍然无法在和弦中显示文本。

标签： d3.js label chord-diagram

【解决方案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;");

【讨论】：

工作得很好。