缩放特定节点的 d3.js 树

Question

我有 d3.js 树，当我搜索特定节点名称时，我需要缩放到特定节点。理想情况下，我的树可能包含 1000 个节点，并且它将缩小以适合屏幕，当我说焦点时，我希望节点位于页面的中心，缩放比例应为 1:1。是否有特定的 d3 事件可以做到这一点？

Answer 1

我找不到执行此操作的事件，而是通过更改过渡手动使节点聚焦。希望这对某人有用。

    /***** get co-ordinates of the entire svg group containing the node. 
           Tree is placed on the centre of the screen 
     ****/
 var svgGroupTranslateCoords =  d3.transform($("#svg").attr("transform"))
     translateX = svgGroupTranslateCoords .translate[0];
     translateY = svgGroupTranslateCoords .translate[1];
     scaleX = svgGroupTranslateCoords .scale[0];
     scaleY = svgGroupTranslateCoords .scale[1];
/******* Get co-ordinates for the node to be highlighted or focused*******/
    var nodeCoords = d3.transform($("#node").attr("transform"))
        ntranslateX = nodeCoords.translate[0];
        ntranslateY = nodeCoords.translate[1];
/**** find the new co-ordinates where the focused node is to be positioned ****/
    var newTranslateX = translateX-ntranslateX;
    var newtranslateY = translateY-ntranslateY
    svgGroup.transition().attr("transform", "translate(" + newTranslateX + "," + newtranslateY + ")scale(1,1)");

Answer 2

这似乎是最新版本的react-d3-tree缩放到特定节点的更新代码：

HTML 节点元素：

<div class="node" onClick={zoomIn}></div>

放大功能：

const zoomIn = () => {
    const currRef = ref.current;
    const d3 = document.querySelector('.rd3t-tree-container');
    const svgGroupTranslateCoords =  d3.querySelector('.rd3t-svg').querySelector('g');
    const x = svgGroupTranslateCoords.transform.animVal[0].matrix.e;
    const newX = x - currRef.getBoundingClientRect().x + 700;
    const newY = 0;
    svgGroupTranslateCoords.setAttribute('transform', `translate(${newX}, ${newY}) scale(1, 1)`)
}