He llegado tan lejos como lo siguiente, en mi aplicación Angular. Sin embargo, el círculo no se dibuja en el svg . ¿Qué estoy haciendo mal que no muestra el círculo?
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"); } Mi plantilla html y código css son bastante simples:
<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; }Solo obtengo el "Zoom Pan" y un área vacía... ¿Qué me estoy perdiendo?
Cuando use angular, le sugiero que se deshaga de los selectores D3 y simplemente use angular. Angular ya tiene marcado de manipulación DOM, por lo que no necesita usar D3 para hacerlo.
// 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>Si no está configurando la altura y el ancho de svg en píxeles, en mi experiencia, debe usar un viewBox.
this.svg = d3 .select("figure#zoom-pan") .append("svg") .attr("width", "100%") .attr("height", "100%") .attr("viewBox", "0 0 " + this.width + " " + this.height)Hice un ejemplo funcional de este código, mostrando el círculo. En primer lugar, debe ser una clase y un componente angular.
Mira el ejemplo de trabajo en stackblitz
Este es el texto mecanografiado para el componente:
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"); } }Y la plantilla:
<h3 class="center">Zoom Pan</h3> <figure id="zoom-pan" class="center"></figure>Sugiero proporcionar siempre un ejemplo de trabajo mínimo .