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

Question

我是这种和弦可视化的新手。我正在研究样本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));

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