javascript - 如何在图例中设置符号？

Question

我是 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中查看开发的所有代码:



我究竟做错了什么？

Answer 1

现在您正在设置一个名为 d 的属性。到文本元素，这对这些文本没有影响(只有路径具有 d 属性)。最重要的是，您没有附加任何路径。

一个简单而常见的修复方法是在输入选择中附加组，您可以向其附加路径和文本。这是一个示例(我正在设置文本的 x 和 y 位置，因此它们不会从符号开始):

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