D3饼图不显示图例

Question

图例是在g 标记中创建的。我怎样才能像这个例子一样把它拉出来。 右侧有颜色条。

代码

    this.svg = d3.select("#airlineChart").select("svg");
     this.mainContainer = this.svg
          .append("g")
          .attr("transform", `translate(${this.radius},${this.radius})`)

;
    private drawSlices() {
    this.slices = this.mainContainer
      .selectAll("path")
      .remove()
      .exit()
      .data(this.pie(this.pieairline))
      .enter()
      .append("g")
      .append("path")
      .attr("d", this.arc);

    this.slices
      .append("rect") // make a matching color rect
      .attr("class", "pieLegend")
      .attr("width", 10)
      .attr("height", 10)
      .append("text") // add the text
      .text(function(d) {
        return d.data.name;
      })
      .style("font-size", 12)
      .attr("y", 10)
      .attr("x", 11);


    this.slices
      .attr("fill", (d, i) => this.color(i))
      .attr("stroke", "black")
      .style("stroke-width", "0px");
      }

slice 只是带​​有任何datatype 的计划变量

当前视图

控制台

Answer 1

从d3 中的方法链返回的元素通常是您在该链中创建的最后一个元素。所以下面会给你一个创建的<path>-elements的引用：

this.slices = this.mainContainer
  .selectAll("path")
  .remove()
  .exit()
  .data(this.pie(this.pieairline))
  .enter()
  .append("g")
  .append("path")
  .attr("d", this.arc);

在下一次调用中，您将进一步的 <rect> 和 <text> 元素附加到此 <path>，将子节点分配给其 DOM 表示。

快速解决方法是将所有元素直接附加在相应的<g>-element 下：

this.slices = this.mainContainer
  .selectAll("path")
  .remove()
  .exit()
  .data(this.pie(this.pieairline))
  .enter()
  .append("g")

// append the circle segment
this.slices
  .append("path")
  .attr("d", this.arc)
  .attr("fill", (d, i) => this.color(i))
  .attr("stroke", "black")
  .style("stroke-width", "0px");

// append the rect element
this.slices
  .append("rect") // make a matching color rect
  .attr("class", "pieLegend")
  .attr("width", 10)
  .attr("height", 10)
  .attr("fill", (d, i) => this.color(i))
  .attr("stroke", "black")
  .style("stroke-width", "0px");

// append the text element
this.slices
  .append("text") // add the text
  .text((d) => d.data.name )
  .style("font-size", 12)
  .attr("y", 10)
  .attr("x", 11);

旁注：我认为您应该将图例添加到不同的容器元素中。这使得使用transform() 移动它更容易，然后将其拆分为许多<g> 元素。要做到这一点，基本上您需要将数据绑定到第二组元素（以您已经做过的相同方式）。然后，第二组只包含 <rect> 和 <text> 元素，但不包含圆段。