logo标签列表

D3js中圆形中间未显示文本

javascriptd3.jssvg
3
以下代码使用d3js绘制圆形。 

csjson = {
  "children": [{
    "name": "DirtySprite",
    "count": 8833
  }, {
    "name": "LineSprite",
    "count": 1732
  }]
};

var diameter = 200;
var pack = d3.layout.pack().size([diameter - 4, diameter - 4]).padding(2).sort(function(a, b) {
  return Math.random();
}).value(function(d) {
  return d.count;
});

var svg = d3.select("body").append("svg").attr("width", diameter).attr("height", diameter);

var vis = svg.datum((csjson)).selectAll(".node").data(pack.nodes).enter().append("g");
var titles = vis.append("title")
  .attr("x", function(d) {
    return d.x;
  }).attr("y", function(d) {
    return d.y;
  }).text(function(d) {
    return d.children ? "" : (d.name + ' ' + d.count);
  });

var circles = vis.append("circle")
  .attr("stroke", "black")
  .style("fill", function(d) {
    return !d.children ? "tan" : "beige";
  })
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("r", function(d) {
    return d.r;
  });

var textLabels = vis.filter(function(d) {
    return !d.children;
  }).append("text").style("text-anchor", "middle")
  .text(function(d) {
    return d.name.substring(0, d.r / 3);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
</body>

圆圈形状正确，但标签显示在屏幕左上角而不是圆圈中心。
var textLabels = vis.filter(function(d) {
    return !d.children;
}).append("text").style("text-anchor", "middle")
  .text(function(d) {
    return d.name.substring(0, d.r / 3);
});

如何将文本显示在圆形图标的中间？
2个回答
2
问题出在你没有给文本DOM设置x和y值。
与其这样：
var textLabels = vis.filter(function(d) {
    return !d.children;
}).append("text").style("text-anchor", "middle")
  .text(function(d) {
    return d.name.substring(0, d.r / 3);
});

它必须是这样的

var textLabels = vis.filter(function(d) {
    return !d.children;
  }).append("text").style("text-anchor", "middle") .attr("x", function(d) {
    return d.x;
  }).attr("y", function(d) {
    return d.y;
  })
  .text(function(d) {
    return d.name.substring(0, d.r / 3);
  });

这里有一个可以工作的例子，点击这里。

1
谢谢。现在这个问题看起来很愚蠢！ :) - dorado
2
你需要将文本的x和y位置设置为：
var textLabels = vis.filter(function(d) {
    return !d.children;
}).append("text").style("text-anchor", "middle")
.attr("x", function(d) {
    return d.x;
}).attr("y", function(d) {
    return d.y;
}).text(function(d) {
    return d.name.substring(0, d.r / 3);
});

这只是一般原则，您可能需要根据自己的需求调整x和y。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接