d3.js在和弦图中添加标签 [英] d3.js Add labels in Chord diagram

问题描述

我对这种和弦可视化是陌生的.我正在研究一个示例 http://bl.ocks.org/mbostock/4062006 :

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

我想在各自的和弦中添加"black"，"blonde"，"brown"，"red"作为标签.这怎么可能.

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

推荐答案

您已经忘记使用enter选择，并且也没有将svg:textPath链接到SGV中的实际路径.为此，需要给您想要文本遵循的路径赋予id属性，并且您需要在textPath中使用href属性对其进行引用.

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.

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

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

然后您要执行类似的操作以添加textPath元素

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

这篇关于d3.js在和弦图中添加标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！