0

こんにちは、保持しているデータに応じて、円の右または左にテキストを配置する適切な方法を誰かが知っているのではないかと思っていました。

現時点ではこれがあり、動作します：

//creating the circles & text together
 var node = svg.selectAll("a.node")
 .data(json)
 .enter().append("a")
 .attr("class", "node")
 ;

  //returning the shape & colors variable & linking it with the relevance in DB
node.append('path') 
    .attr("d", d3.svg.symbol().type(circle))
    .attr("transform", "translate(0,0)")

   ;
//returning the names from the db
node.append("text")
   .text(function(d) { return d.Name; })
   .style("font-size", "8px")
   .style("font", "Arial")
   .attr('x',  function (d) { 

          if (d.Field === "Canda"&& d.Name.length > 40) {return -180 }
            else if (d.Field === "Canda") {return 9}
          else {return 2} 

        ;})
   .attr('y', 2);

しかし、私のjsonテキストの長さが異なるため、「-140」と言うと、短いテキストは円にさえ近づきません。したがって、長さが変化しても、テキストを円からすべて同じ距離にする動的な方法はありますか?

編集: .length を追加しただけですが、それは、テキストがさまざまな長さになるため、if ステートメントをさらに実行する必要があることを意味します。

http://jsfiddle.net/xwZjN/66/

4

1 に答える 1

0

テキストアンカーを含むソリューション:

force.on("tick", function() {

   // edit to include text-anchor
   text.attr("text-anchor", function(d) { 
       if( d.Country ==="USA" ) { return "end" } 
       else { return "start" }
   } )
   // edit to change x starting point
   text.attr("x", function(d) {

           if (d.Country ==="USA") { 
                return d.x - 10;
           }
           else {  
               return d.x + 6; 
           } 
   })

   .attr("y", function(d) { return d.y + 4; });           

 node.attr("cx", function(d) { return d.x; })
     .attr("cy", function(d) { return d.y; });
});
于 2013-02-15T18:10:00.050 に答える