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>元素的引用：

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>-元素下面：

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>元素，但不包含圆形线段。

D3饼图未显示图例

1 个答案: