Question

以下代码打包d3js中的圈子。

＆＃13;

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);
  });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
</body>

＆＃13;

圆形正确，但标签显示在屏幕的左上角，而不是圆圈的中心。

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);
});

如何在圆圈中间显示文字？

Answer 1

问题是因为您没有将x和y值设置为文本DOM。

而不是：

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);
  });

工作小提琴here

Answer 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。

文字没有显示在d3js的圆圈中间

2 个答案: