Recientemente comencé a trabajar con D3js y tengo algunos problemas para acercar nodos individuales dentro de un círculo de empaque. Actualmente, solo estoy acercando las coordenadas X e Y del mouse. Se vuelve difícil de manejar cuando se aumenta la escala del zoom (salta alrededor del SVG). Traté de seguir el ejemplo de empaquetado circular de Mike Bostock, pero encontré que era confuso y poco claro.

 function zoomsTo(e) { // coordinate of mouse var mouseX = e.layerx var mouseY = e.layerY let k = 3 let svg = d3.select("svg") svg.transition().call(zoom.scaleTo, k) // ZOOMS INTO SPECIFIC COORDINATES //1F ELSE STATEMENT Checks if mouse is near edge. Limits jumping around if (mouseX > 100 && mouseX < 145 || mouseY > -49 && mouseY < -5) { svg.transition().duration(1000) .call(zoom.translateTo, mouseX / 3, mouseY / 3) } else if (mousex > 45 || mouseY > 400) { svg.transition().duration(1000) .call(zoom.translateTo, mouseX / 2.75, mouseY / 2.85) } else if (mouseX < -10 && mouseY >= 250) svg.transition().duration(1000) .call(zoom.translateTo, mouseX / 2.75, mouseY / 2.85) else { svg.transition().duration(1000) .call(zoom.translateTo, mouseX, mouseY) // Checks if svg translate is at edge to avoid jumping around as translate value is depended on the scale. // If scale is 1.5, x and y(300,300) is not the same as when scale is 2 let translateValue = svg.attr('transform') console.log(svg.attr("transform")) // MESSY FOR TESTING PURPOSES // instead of default values we need dynamic values if (translatevalue >= "(-300,-36)" || translateValue >= '(-380,2)' || translateValue >= '(-400,0)' || translatevalue >= '(0,-250) ' || translatevalue >= "(-150,288) " || translatevalue >= "(8, -500)" || translateValue >= '(-800,0)' || translateValue > "(-1000, 0)" ) //instead of having set value put pixel calculations svg.attr("transform', 'translate(' + (width/3) +", " + height/3 + ')") console.log("AFTER " + svg.attr( "transform")) } }

PD. (Lo tengo desordenado para fines de prueba;))