Javascript 如何在图例中设置符号？

我是D3的新手，我想在传奇文本的左边设置一个符号。图例位于图形右侧，图例的所有文本都正确定位，但我无法在其左侧找到与图例对应的符号

定位图例并尝试对符号执行相同操作的功能包括：

  setLegend(canvas, symbols, width, offset_right, height) {
    canvas
      .selectAll("legends")
      .data(symbols)
      .enter()
      .append("text")
      .attr("transform", function(d, i) {
        let x = width - offset_right + 50;
        let y = height / 2 - 100 + i * 24;
        return "translate( " + x + "," + y + ")";
      })
      .attr(
        "d",
        d3
          .symbol()
          .type(function(d) {
            return d.symbol;
          })
          .size("75")
      )
      .style("text-anchor", "left")
      .text(d => {
        return d.stats;
      })
      .attr("fill", "#FFFFFF")
      .style("font-size", "10pt")
      .style("font-weight", "bold");   }

您可以在此屏幕盖中检查图例的正确位置，但其左侧没有任何符号

您可以在codesanbox中选中开发的所有代码：

---

我做错了什么？

现在您正在为文本元素设置一个名为

d

的属性，该属性对这些文本没有影响（只有路径具有

d

属性）。最重要的是，您没有附加任何路径

一个简单而常见的修复方法是在enter选择中添加组，将路径和文本添加到其中。下面是一个示例（我正在设置文本的

x

和

y

位置，这样它们就不会从符号开始）：

---

天啊！！！非常感谢@Gerardo Furtado对您的帮助！！！对于你的帮助，我无话可说！！！

setLegend(canvas, symbols, width, offset_right, height) {
    const groups = canvas
        .selectAll("legends")
        .data(symbols)
        .enter()
        .append("g")
        .attr("transform", function(d, i) {
            let x = width - offset_right + 50;
            let y = height / 2 - 100 + i * 24;
            return "translate( " + x + "," + y + ")";
        });

    groups.append("path")
        .attr("d", d3.symbol().type(function(d) {
            return d.symbol;
        }).size("75"))
        .attr("fill", function(d) {
            return d.color;
        });

    groups.append("text")
        .attr("x", 10)
        .attr("y", 5)
        .style("text-anchor", "left")
        .text(d => {
            return d.stats;
        })
        .attr("fill", function(d) {
            return d.color;
        })
        .style("font-size", "10pt")
        .style("font-weight", "bold");
}