简体   繁体   English

如何使用D3的力布局平移到节点

[英]How to pan to a node using d3's force layout

I would like to focus on a node when it is searched for by name. 我想重点关注按名称搜索的节点。 I am trying to do this using a recenter method.... 我正在尝试使用最新方法来执行此操作。

zoom = d3.behavior.zoom()
        .scaleExtent([.05, 10])
        .on("zoom", zoomed);
svg = d3.select("#graph")
        .append("svg")
        .attr("height", height)
        .attr("width", width)
        .call(zoom);
....
function zoomed(sel) {
    zoomBase(d3.event.translate , d3.event.scale);
}
function zoomBase(translate, scale){
    zoom.scale(scale);
    zoom.translate(translate);
    container.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}
function recenter(node){
    var node = findNodeByName(node);
    if(zoom.scale() < 0.5){
        zoom.scale(0.5);
    }
    zoom.translate([node.x, node.y]); // Math seems to be wrong here
    container.attr("transform", "translate(" + translate + ")scale(" + zoom.scale() + ")");
}

The problem is that when I am over the node in question and search for it my location shows up as [-2246.3690822841745, -846.6411913027562] but when I get the x and y off of the actual node I get [4346.868560310511, 1950.790521658118] considering I am over top of the node, is there some math or something I need here? 问题是,当我在有问题的节点上并对其进行搜索时,我的位置显示为[-2246.3690822841745, -846.6411913027562]但是当我从实际节点上获得x和y时,我得到了[4346.868560310511, 1950.790521658118]在节点的顶部,这里需要一些数学或其他东西吗?

Lars was right this is the answer... 拉斯是对的,这就是答案。

zoom.translate([width / 2 - zoom.scale() * node.x, height / 2 - zoom.scale() * node.y])

To break this doesn a bit 打破这个一点

width / 2 (go to middle) 
- 
zoom.scale() * node.x (move middle to the scaled x)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM