Javascript D3：如何设置圆圈内的文字

我是D3.js的新手，我试图在一个圆圈内放置一个文本，但我只能使用其中一个，不能使用所有的圆圈

您可以在这个snipet中找到所有代码

我创建圆圈并尝试将文本放入其中的函数是“setPointsToCanvas”

setPointsToCanvas（画布、数据、比例、x_标签、y_标签、lang）{
帆布
.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“类”、“点”）
.attr（“r”，20）//半径大小，可以映射到另一个维度
.attr（“cx”，功能（d）{
返回scales.xScale（parseFloat（d.value_x））；
})//x位置
.attr（“cy”，函数（d）{
返回scales.yScale（解析浮点值（d.value_y））；
})//y位置
.样式（“填充”、“FFC107”）
.on（“鼠标悬停”，tipMouseOver）
.on（“mouseout”，tipMouseOut）；
//每个圆圈的广告标签
帆布
.数据（数据）
//.输入（）
.append（“文本”）
.attr（“x”，函数（d）{
返回scales.xScale（parseFloat（d.value_x））；
})
.attr（“y”，函数（d）{
返回刻度.yScale（解析浮点（d.value_y）-0.9）；
})
.文本（功能（d）{
返回d.name.substring（0,3）；
})
.style（“文本锚定”、“中间”）
.style（“字体大小”、“粗体”）
.style（“字体大小”，“10磅”）
.样式（“填充”、“#344761”）；
让工具提示=d3
//.选择（“#”+this.props.idContainer）
.选择（“正文”）
.附加（“div”）
.attr（“类”、“工具提示播放器”）
.样式（“不透明度”，0）；
/**
*我们在setPointsToCanvas内部定义此函数，以访问画布、数据、比例和工具提示
*@param{*}d
*@param{*}iter
*/
功能提示（d，iter）{
让玩家=data.filter（p=>{
如果（p.value\ux==d.value\ux&&p.value\uy==d.value\uy）{
返回p；
}
});
设html=“”；
for（设i=0；i0）html+=“
”；
html+=
玩家[i].姓名+
“
”+
x_标签+
": " +
文本+
“%
”+
"" +
y_标签+
": " +
文本y+
"%";
}
工具提示
.html（html）
.style（“左”，d3.event.pageX+15+“px”）
.style（“top”，d3.event.pageY-28+“px”）
.transition（）
.持续时间（200）//ms
.style（“不透明度”，0.9）；//以0开头！
//使用D3选择元素，更改颜色和大小
d3.选择（本）
//.attr（“r”，10）
.样式（“光标”、“指针”）；
}
/**
*我们在setPointsToCanvas中创建此函数以访问工具提示
*/
函数tipMouseOut（）{
工具提示
.transition（）
.持续时间（500）//ms
.style（“不透明度”，0）；//不关心位置！
//d3.选择（this）.attr（“r”，5）；
}
}

在这里你可以看到，我只能得到一个圆圈内的一个文本，而不是所有圆圈内的文本

---

我做错了什么？

遵照@Pablo EM的建议，感谢@Andrew Reid的帮助，我发布了问题的解决方案

@Andrew Reid如何说如果我在selectAll（“文本”）上有问题，我必须将其更改为另一个文本grouper。我是如何拥有它的，我通过selectAll（“textCircle”）进行了改变，一切对我来说都很好

这是在每个圆圈内写入文本的代码。这段代码可以在“setPointsToCanvas”方法中找到

现在，这里是最终结果的图像：

---

如果您在访问所有代码并检查其工作原理之前通过发布的CodeSandBox访问代码。

您没有以相同的方式输入圆圈和文本，如果您使用与圆圈相同的方法，则可以创建文本：

canvas.selectAll（“text”）.data（data.enter（）.append（“text”）…

，如果文本已经存在，您不想将数据绑定到这些现有的文本元素（在轴上），因此您可以使用

canvas。如果只是输入文本，请选择all（null）

，如果您希望能够重新选择这些特定的文本元素以更新/退出标签，请选择by class name。这很有效！！！非常感谢您的帮助@Andrewerid，为了

d3j.s

标签的健康，请停止在评论中回答，并使用正确的答案@PabloEM，请随意添加一个答案（@José，你也一样），还有比我写的更多的话要说。我不总是有时间输入一个我认为满意的答案-这对我来说也意味着解释为什么错误的行为被看见（在这种情况下，我没有看到它当我评论，虽然在重新阅读我有点失望，我没有看到它）。此外，我最初的看法是，这可能是一个重复，但可能很难找到，同时发表评论可以证实这个问题（虽然我不能很快找到，也许我今晚会补充一个答案）。是的，我完全理解你的观点。但是，另一方面，你的评论通常对OP来说足够好和有用，因为他可以解决他的问题，尽管更全面的答案会更好。

  setPointsToCanvas(canvas, data, scales, x_label, y_label, lang) {
    canvas
      .selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "dot")
      .attr("r", 20) //Radius size, could map to another dimension
      .attr("cx", function(d) {
        return scales.xScale(parseFloat(d.value_x));
      }) //x position
      .attr("cy", function(d) {
        return scales.yScale(parseFloat(d.value_y));
      }) //y position
      .style("fill", "#FFC107")
      .on("mouseover", tipMouseOver)
      .on("mouseout", tipMouseOut);

//Ad label for each circle
canvas
  .data(data)
  //.enter()
  .append("text")
  .attr("x", function(d) {
    return scales.xScale(parseFloat(d.value_x));
  })
  .attr("y", function(d) {
    return scales.yScale(parseFloat(d.value_y) - 0.9);
  })
  .text(function(d) {
    return d.name.substring(0, 3);
  })
  .style("text-anchor", "middle")
  .style("font-weight", "bold")
  .style("font-size", "10pt")
  .style("fill", "#344761");

let tooltip = d3
  //.select("#" + this.props.idContainer)
  .select("body")
  .append("div")
  .attr("class", "tooltip-player")
  .style("opacity", 0);

/**
 * We define this function inside of setPointsToCanvas to get access to canvas, data, scales and tooltip
 * @param {*} d
 * @param {*} iter
 */
function tipMouseOver(d, iter) {
  let players = data.filter(p => {
    if (p.value_x === d.value_x && p.value_y === d.value_y) {
      return p;
    }
  });
  let html = "";
  for (let i = 0; i < players.length; i++) {
    let text_x =
      lang === "es"
        ? String(parseFloat(players[i].value_x).toFixed(2)).replace(
            ".",
            ","
          )
        : parseFloat(players[i].value_x).toFixed(2);
    let text_y =
      lang === "es"
        ? String(parseFloat(players[i].value_y).toFixed(2)).replace(
            ".",
            ","
          )
        : parseFloat(players[i].value_y).toFixed(2);
    if (i > 0) html += "<hr>";
    html +=
      players[i].name +
      "<br><b>" +
      x_label +
      ": </b>" +
      text_x +
      "%<br/>" +
      "<b>" +
      y_label +
      ": </b>" +
      text_y +
      "%";
  }
  tooltip
    .html(html)
    .style("left", d3.event.pageX + 15 + "px")
    .style("top", d3.event.pageY - 28 + "px")
    .transition()
    .duration(200) // ms
    .style("opacity", 0.9); // started as 0!

  // Use D3 to select element, change color and size
  d3.select(this)
    //.attr("r", 10)
    .style("cursor", "pointer");
}

/**
 * We create this function inside of setPointsToCanvas to get access to tooltip
 */
function tipMouseOut() {
  tooltip
    .transition()
    .duration(500) // ms
    .style("opacity", 0); // don't care about position!
  //d3.select(this).attr("r", 5);
}
  }

//Ad label for each circle
canvas
  .selectAll("textCircle")
  .data(data)
  .enter()
  .append("text")
  .attr("x", function(d) {
    return scales.xScale(parseFloat(d.value_x));
  })
  .attr("y", function(d) {
    return scales.yScale(parseFloat(d.value_y) - 0.9);
  })
  .text(function(d) {
    return d.name.substring(0, 3);
  })
  .style("text-anchor", "middle")
  .style("font-weight", "bold")
  .style("font-size", "10pt")
  .style("fill", "#344761");