根据数据将文本对齐到一个圆圈的左侧和右侧

嗨，我想知道任何人都知道根据所保存的数据在圆圈右侧或左侧对齐文本的适当方式。根据数据将文本对齐到一个圆圈的左侧和右侧

目前，我有这个&它的工作原理：

//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 ..但这仍然意味着我需要做更多，如果作为文本将不同长度的声明。

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

来源

2013-02-15 Jose

，你可以把这个的jsfiddle为我们...拨弄任何机会呢？ – cmonkey 2013-02-15 16:48:29

感谢您的答复 - 将做 – Jose 2013-02-15 16:50:28

嗨@cmonkey我已经把一个例子在jsfiddle ... http://jsfiddle.net/xwZjN/66/ – Jose 2013-02-15 17:37:19

涉及文本锚：A液

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-15 18:10:00 cmonkey

根据数据将文本对齐到一个圆圈的左侧和右侧

回答

相关问题