D3.js d3文本元素未在圆内渲染

我正在尝试向svg圆圈添加文本。我读过其他关于使用分组“g”标记的帖子，我也尝试过，但我的文本仍然无法呈现。不过，我看到控制台中存在文本元素

以下是相关代码：

 var node = svg
    .selectAll(".node")
    .data(data.nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .call(
      d3
        .drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended)
    );
  node
    .append("circle")
    .attr("r", (d) => {
      return d.type === "application" ? 50 : 20;
    })
    .attr("fill", (d) => {
      return d.type === "application" ? "red" : "blue";
    });

  node
    .append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function (d) {
      return d.name;
    });

  force.on("tick", function () {
    link
      .attr("x1", function (d) {
        return d.source.x;
      })
      .attr("y1", function (d) {
        return d.source.y;
      })
      .attr("x2", function (d) {
        return d.target.x;
      })
      .attr("y2", function (d) {
        return d.target.y;
      });
    node.attr("transform", function (d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
  });

  function dragstarted(d) {
    if (!d3.event.active) force.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }

  function dragended(d) {
    if (!d3.event.active) force.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

根据已接受的答案添加了正确的代码。

---

为什么仍然无法呈现？

解决此问题的一种方法是首先将数据绑定到组元素，然后分别附加圆和文本。因此，您的代码变成：

var node = svg
  .selectAll("g")
  .data(data.nodes)
  .enter().append("g")
  .attr("class", "nodes");

node
  .append("circle")
// all circle-related code

node
  .append("text")
// all text related code, including x and y

---

只有两个（AFAIK）

svg

元素允许嵌套其他元素：

g

和

text

。当您在选择

圆圈时调用
append
时，您将追加一个
文本
元素作为
圆圈
的子元素，但它不支持该子元素。
如何使用每个圆圈元素的“cx”和“cy”来居中文本元素？我尝试将x和y设置为100，但仍然没有渲染任何内容。好的，这样在控制台中看起来更好，但是圆是在0,0位置渲染的。如何使圆的位置正确<代码>节点

返回一个

cy

和

cy

字段，但它不在中间渲染。我已经编辑了上面的代码，但现在连圆圈都在上角了。在我进行更改之前，它们已正确定位。我怎么知道x和y是什么，当它基于圆圈被拖动的位置时？嗯…最好问一个新问题，因为它更多的是关于模拟代码，而不是在将其附加到圆圈时不渲染文本。