使用 D3.js 在 SVG 內顯示一個圓圈

Question

在我的 Angular 應用程序中，我已經做到了以下幾點。 但是，圓圈​​不會繪制在svg 。 我做錯了什么，圓圈沒有顯示？

  svg: any;
  margin = 50;
  width = 350 - (this.margin * 2);
  height = 300 - (this.margin * 2);

  ngOnInit(): void {
    this.createSvg();
    this.createCircle();
  }

  createSvg(): void {
    this.svg = d3
      .select("figure#zoom-pan")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
      .append("g")
      .attr("transform", "translate(" + this.margin + "," + this.margin + ")");
  }

  createCircle(): void {
      this.svg
        .append("circle")
        .attr("cx", document.body.clientWidth / 2)
        .attr("cy", document.body.clientHeight / 2)
        .attr("r", 50)
        .style("fill", "#B8DEE6")
  }

  ngAfterViewInit() {
    let svg = d3
      .select("svg")
      .call(d3.zoom().on("zoom", (event) => {
        svg.attr("transform", event.transform);
      }))
      .append("g");
  }

我的html模板和css代碼非常簡單：

<h3 class="center">Zoom Pan</h3>
<figure id="zoom-pan" class="center"></figure>
<ng-content></ng-content>

---

.center {
    display: flex;
    justify-content: center;
}

figure#zoom-pan {
    margin: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

我只得到“Zoom Pan”和一個空白區域......我錯過了什么？

Answer 1

使用 angular 時，我建議您放棄 D3 選擇器而只使用 angular。 Angular 已經有 DOM 操作標記，所以你不需要使用 D3 來完成它。

// component
createCircle() { 
  this.circle = {
    cx: document.body.clientWidth / 2,
    cx: document.body.clientHeight / 2,
    r: 50
  }
}

// component template
<figure>
  <svg
    [height]="height + (margin * 2)"
    [width]="width + (margin * 2)"
  >
    <g [attr.transform]="'translate(' + margin + ',' + margin + ')">
      <circle *ngIf="circle"
        [attr.cx]="circle.cx"
        [attr.cy]="circle.cx"
        [attr.r]="circle.r" />
    </g>
  </svg>
</figure>
      

Answer 2

如果您沒有以像素為單位設置 svg 高度和寬度，根據我的經驗，您需要使用 viewBox。

this.svg = d3
  .select("figure#zoom-pan")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 " + this.width + " " + this.height)

Answer 3

我制作了此代碼的一個工作示例，顯示了圓圈。 首先它需要是一個類和一個角度組件。

在 stackblitz 查看工作示例

這是組件的打字稿：

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: "ng-content",
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit  {
  svg: any;
  margin = 50;
  width = 350 - this.margin * 2;
  height = 300 - this.margin * 2;

  ngOnInit(): void {
    this.createSvg();
    this.createCircle();
  }

  createSvg(): void {
    this.svg = d3
      .select("figure#zoom-pan")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
      .append("g")
      .attr("transform", "translate(" + this.margin + "," + this.margin + ")");
  }

  createCircle(): void {
    this.svg
      .append("circle")
      .attr("cx", document.body.clientWidth / 2)
      .attr("cy", document.body.clientHeight / 2)
      .attr("r", 50)
      .style("fill", "#B8DEE6");
  }

  ngAfterViewInit() {
    let svg = d3
      .select("svg")
      .call(
        d3.zoom().on("zoom", (event) => {
          svg.attr("transform", event.transform);
        })
      )
      .append("g");

  }
}

和模板：

<h3 class="center">Zoom Pan</h3>
<figure id="zoom-pan" class="center"></figure>

我建議始終提供一個最小的工作示例。