1

この種のコードの視覚化は初めてです。私はサンプル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));
4

1 に答える 1

2

選択を使用するのを忘れており、SGV 内の実際のパスにenterリンクしていません。svg:textPathこれを行うには、テキストがたどるパスに属性が与えられている必要があり、これを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;");
于 2013-10-22T13:29:26.317 に答える