javascript - 如何使用 d3 的力布局平移到节点

标签 javascript d3.js

我想在按名称搜索节点时关注它。我正在尝试使用最近的方法来做到这一点....

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() + ")");
}

问题是,当我越过有问题的节点并搜索它时,我的位置显示为 [-2246.3690822841745, -846.6411913027562] 但是当我得到实际的 x 和 y 时node 我得到 [4346.868560310511, 1950.790521658118] 考虑到我在节点之上,这里有一些数学或我需要的东西吗?

最佳答案

拉斯是对的,这就是答案......

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

稍微打破一下

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

关于javascript - 如何使用 d3 的力布局平移到节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31011004/

相关文章:

javascript - 使用箭头键控制页面位置

javascript - 无法使用 jQuery 和 AJAX 发送 POST 请求

javascript - 检查一个数的可整性的基本练习

javascript - 隐藏系列后轴标签恢复到原始位置

javascript - d3.js 可选择树形图

javascript - 由 JavaScript 生成时 SVG textPath 不渲染

javascript - 将表数组值附加到另一个数组

javascript - 向 d3 水平条形图添加标签?

javascript - 条形图的子集序数域

javascript - d3.js 如何向条形图添加线条