• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

187
Views
D3.js: crea un nuevo nodo en el área visible cuando se hace zoom

Actualmente estoy trabajando en un gráfico d3 dirigido por fuerza utilizando la función de zoom . El usuario tiene la opción de crear nuevos nodos en el gráfico. Esto se utiliza a través de un evento de doble clic en el gráfico para obtener las coordenadas en las que se crea el nuevo nodo.

Es posible, y bastante común durante el trabajo diario del usuario, que haga doble clic en el gráfico, luego haga zoom a otra área y/o cambie la escala, y luego termine la creación del nodo (configuración de atributos). En este caso, se supone que el nodo se crea en el área visible del gráfico.

Para este escenario, escribí una función que toma el nodo a crear y el elemento svg y mutó las coordenadas del nodo para centrarlo en el área visible, si es necesario:

 moveNodeIntoViewPort(node: NodeInterface, svgElement: any): NodeInterface { let svg = svgElement._groups[0][0]; let minX: number = parseInt(svg.attributes.viewBox.nodeValue.split(" ")[0]); let minY: number = parseInt(svg.attributes.viewBox.nodeValue.split(" ")[1]); let width: number = parseInt( svg.attributes.viewBox.nodeValue.split(" ")[1].split(" ")[0] ); let height: number = parseInt( svg.attributes.viewBox.nodeValue.split(" ")[1].split(" ")[1] ); let zoomX: number = parseInt(svg.__zoom.x) * -1; let zoomY: number = parseInt(svg.__zoom.y) * -1; let zoomK: number = parseFloat(svg.__zoom.k.toFixed(2)); node.x = node.x < minX + zoomX || node.x > minX + width + zoomX ? (minX + zoomX + width / 2) / zoomK : node.x; node.y = node.y < minY + zoomY || node.y > minY + height + zoomY ? (minY + zoomY + height / 2) / zoomK : node.y; return node; }

Aunque este código funciona según lo previsto, no estoy satisfecho con el código en sí y me pregunto si D3 ofrece una solución mejor lista para usar. No pude encontrar ninguna información en la documentación oficial de D3 sobre cómo:

  • compruebe si un nodo es visible en el área ampliada
  • cómo obtener las coordenadas del centro actual de un gráfico ampliado

Cualquier aporte es muy apreciado.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Después de algunas investigaciones (y con algo de ayuda), logramos obtener el mismo resultado con el siguiente código usando DOMMatrix:

 moveNodeIntoViewPort(node: NodeInterface, svgElement: any): NodeInterface { let transformationMatrix = this.viewportRef._groups[0][0].getScreenCTM(); const nodePoint = new DOMPoint(node.x, node.y).matrixTransform( transformationMatrix ); let currentViewport = svgElement._groups[0][0].getBoundingClientRect(); let centerPoint = new DOMPoint( currentViewport.left + currentViewport.width / 2, currentViewport.top + currentViewport.height / 2 ).matrixTransform(transformationMatrix.inverse()); if ( nodePoint.x < currentViewport.left || nodePoint.x > currentViewport.right || nodePoint.y < currentViewport.top || nodePoint.y > currentViewport.bottom ) { node.x = centerPoint.x; node.y = centerPoint.y; } return node; }

viewportRef es la selección d3 del elemento secundario <g class="viewport> del elemento <svg> .

Aunque no es mucho más corta que la función original, tal como es ahora, podemos evitar el uso de la manipulación de cadenas y podemos extraer parte de la función para usarla en otros procesos.

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error