Estoy trabajando en una aplicación Angular en la cual uno de los componentes es un rectángulo fijo, y en el mismo se dibuja otro rectángulo móvil que desplaza horizontalmente según una acción del usuario. Básicamente la acción que pretendo implementar es que cuando el usuario realice un click sobre el rectángulo fijo, se capturen las coordenadas y se redibuje el rectángulo móvil en una determinada posición. Para lograr esto me estoy valiendo del uso de la librería d3
, que permite manipular etiquetas html
y específicamente elementos svg
.
No tengo ningún inconveniente para la graficación y cambios en el gráfico cuando utilizo eventos relacionados a elementos standard como el caso de botones, checkbox, select, etc. Básicamente para realizar cambios en el gráfico lo que hago es actualizar atributos de clase en los métodos asociados a determinados eventos.
El problema lo tengo cuando defino un evento por medio de d3
, en el cuál cuando intento acceder a los valores de los atributos de clase (inicializados previamente) ,en su función asociada, me aparecen como que no están definidos.
Voy a dejar un enlace de StackBlitz con una simplificación de lo que estoy intentando hacer, pero voy a dejar unas capturas de pantalla y parte del código aquí.
Cuando se inicia la aplicación se tiene:
Cuando se pulsa el botón "Iniciar" se dibuja el rectángulo móvil:
Cuando se pulsa el botón "Desplazar" se redibuja el rectángulo móvil hacia la derecha, se van haciendo corrimientos de 15px cada vez que se pulsa el botón:
El botón "Desplegar valores" sirve para desplegar en consola los valores actuales de los atributos de clase con los cuales se dibuja el rectángulo móvil.
Como mencioné previamente, cuando intento acceder a estos atributos desde un método definido con d3
me aparecen como que no están definidos.
El código html
del componente es:
<div id="contenedor"></div>
<button id="btn1" (click)="iniciar()">Iniciar</button>
<button id="btn2" (click)="desplazar()">Desplazar</button>
<button id="btn3" (click)="desplegar_valores()">Desplegar valores</button>
El código Typescript
es:
import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
@Component({
selector: 'app-x',
templateUrl: './x.component.html',
styleUrls: ['./x.component.css']
})
export class XComponent implements OnInit {
private width: number;
private height: number;
private channel_svg: any;
private left_edge: number;
private rect_width: number;
constructor() {
this.width=400;
this.height=100;
this.left_edge=0;
this.rect_width=80;
}
ngOnInit() {
d3.select('#contenedor')
.style('margin','0 auto')
.style('float','left')
.style('width', this.width + 'px')
.style('height', this.height + 'px');
this.channel_svg= d3.selectAll('#contenedor').append('svg');
this.channel_svg.attr('width', '100%')
.attr('height', '100%')
.attr('class','channel_rhythm')
.style('background-color','#2B4791')
.attr('g');
this.channel_svg.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width','99.9%')
.attr('height','99.5%')
.attr('stroke','orange')
.attr('stroke-width',4)
.style('fill','#A0CDF1')
.style('fill-opacity',0)
.on('click', this.getCoordenada);
}
iniciar(){
this.left_edge=0;
this.drawRect();
}
desplazar(){
this.left_edge +=15;
this.drawRect();
}
desplegar_valores(){
console.log('left_edge:' + this.left_edge);
console.log('rect_width:' + this.rect_width);
}
drawRect(){
d3.selectAll('.rectangle').remove(); //Limpiar el rectángulo
this.channel_svg.append('rect')
.attr('class','rectangle')
.attr('x',this.left_edge)
.attr('y',0)
.attr('width',this.rect_width)
.attr('height',this.height)
.style('fill','#A0CDF1')
.style('fill-opacity',0.2)
.on('click', this.getCoordenada);
}
getCoordenada(){
let coords = d3.mouse(this);
let center_rect= coords[0];
//console.log('Coordenada x:', coords[0]);
//console.log('Coordenada y:', coords[1]);
console.log('left_edge:' + this.left_edge);
console.log('rect_width:' + this.rect_width);
}
}
Como se puede observar cuando accedo a los atributos left_edge
y rect_widt
desde los métodos asociados a los botones no tengo ningún tipo de inconveniente.
El problema radica cuando intento acceder a estos valores en el método getCoordenada()
, que se ejecuta cuando se realiza un click sobre el rectángulo fijo (Azul) y también sobre el rectángulo móvil.
Aclaro que soy nuevo en el manejo de Angular y de la librería d3
, por lo tanto no estoy entendiendo porqué sucede esto.
El enlace de StackBlitz es: enlace
Muchas gracias.