Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

305
Vistas
D3v6 how to properly zoom lines and circles in force directed graph

I have based my code on this graph and I'm having problems with zooming in.

Before zooming in it looks like

enter image description here

but after zoom in things get messed up

enter image description here

My modified code looks like this

const simulation = d3.forceSimulation(nodes)
      .force('link', forceLink)
      .force('charge', forceNode)
      .force('center',  d3.forceCenter())
      .on('tick', ticked);

    const svg = d3.select('figure#' + this.graphId)
      .append('svg')
      .attr('viewBox', [-width / 2, -height / 2, width, height])
      .attr('style', 'max-width: 100%; height: auto; height: intrinsic;');

    const link = svg.append('g')
      .attr('stroke', typeof linkStroke !== 'function' ? linkStroke : null)
      .attr('stroke-opacity', typeof linkStrokeOpacity !== 'function' ? linkStrokeOpacity : null)
      .attr('stroke-width', typeof linkStrokeWidth !== 'function' ? linkStrokeWidth : null)
      .attr('stroke-linecap', linkStrokeLinecap)
      .selectAll('line')
      .data(links)
      .join('line');

    const node = svg.append('g')
      .attr('fill', nodeFill)
      .attr('stroke', nodeStroke)
      .attr('stroke-opacity', nodeStrokeOpacity)
      .attr('stroke-width', nodeStrokeWidth)
      .selectAll('g')
      .data(nodes)
      .join('g')
      .call(drag(simulation));

    const tooltip = svg.append('text')
      .attr('visibility', 'hidden')
      .attr('opacity', 0)
      .attr('stroke', 'white')
      .attr('stroke-width', 0.2)
      .attr('fill', 'black')
      .attr('font-size', 22)
    ;

    const circle =  node.append('circle')
      .attr('r', typeof nodeRadius !== 'function' ? nodeRadius : null)
    ;



    //
    // Zoom related stuff
    //

    function zoomed(e: any): void {
      node.attr('transform', e.transform);
      link.attr('transform', e.transform);
      circle.attr('transform', e.transform);
      tooltip.attr('transform', e.transform);
    }

    const zoomHandler = d3.zoom()
      .on('zoom', zoomed)
      .scaleExtent([1, 5])
    ;

    svg.call(zoomHandler);

What am I not doing right and how can I fix it?

Any help would be appreciated!

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda