7

textPath を使用してパスの 1 つに沿ってテキストが書き込まれた図があります。ただし、私の問題は次のとおりです。テキストパスの反対側、つまりその下にテキストを配置する必要があります。

次に例を示します。

現在、外に座っています

ここのテキストは、青色の実線の領域内にある必要があります。つまり、実際に読むことができます。ここの青い弧は textPath です。つまり、テキストを約 20px 下に移動したいだけです。

私を本当に混乱させているのは、テキストに「x」プロパティを設定して左右に移動できることですが、「y」プロパティを設定して上下に移動することはできません。

私はそれを理解することはできません。誰でも助けることができますか？

これが私のコードです

  var labels = svg.selectAll("text.label")
      .data(partition.nodes(data))
     .enter()
      .append("text")
      .attr("class", "label")
      .attr("x", 10)
      .attr("stroke","black")
      .style("background-color",'white')

    labels.append("textPath")
      .attr("xlink:href", function(d) { return '#' + d.name })
      .text(function(d) { return d.name.capitalize() })
4

2 に答える 2

18

プロパティを使用してdy、垂直方向の配置を変更できます。

于 2013-04-27T16:50:08.193 に答える
2

D3 Forced レイアウト チャートのリンクにラベルを表示する JS フィドルの例を作成しました

JS Fiddle の動作デモを参照してください: http://jsfiddle.net/bc4um7pc/

var linktext = svg.append("svg:g").selectAll("g.linklabelholder").data(force.links());

linktext.enter().append("g").attr("class", "linklabelholder")
 .append("text")
 .attr("class", "linklabel")
 .style("font-size", "13px")
 .attr("dx", "30")
 .attr("dy", "-5")
 .attr("text-anchor", "start")
 .style("fill","#000")
 .append("textPath")
 .attr("xlink:href",function(d,i) { return "#linkId_" + i;})
 .text(function(d) { 
 return d.type; 
 });
于 2014-09-12T06:35:48.553 に答える