如何在给定 x 和 y 坐标的情况下将 d3js 树节点移动到视口的中间

问题描述 投票:0回答:0

程序搜索特定节点,一旦找到,函数 scrollToBottom 应该将视口移动到节点的 x 和 y 坐标并将其定位在视口的中心底部,而不管其初始位置如何。然而,结果是大部分时间树都在可见区域之外。

var margin = {
        top: 25,
        right: 700,
        bottom: 20,
        left: 700
    },
    width = 5000 - margin.right - margin.left,
    height = 5000 - margin.top - margin.bottom;
    
var i = 0,
    duration = 750,
    rectW = 100,
    rectH = 30,
    root;
    
var zoom = d3.behavior.zoom()
    .scaleExtent([.2, 10])
    .on("zoom", zoomed);

zoom.translate([margin.left, margin.top]).scale(.7);
d3.select("svg").on("dblclick.zoom", null);
var tree = d3.layout.tree()
    .nodeSize([110, 50]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) {
        return [d.x + rectW / 2, d.y + rectH / 2];
    });
    
var gElement = document.createElementNS(d3.ns.prefix.svg, 'g');
gElement.setAttribute("id", "fg");

    var svg = d3.select("div.svg-container-en").append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)
        .call(zoom)
        .append(function() { return gElement; })
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")scale(.7,.7)")
    zoom.translate([margin.left, margin.top]).scale(.7);

function findMember(data) {
    opened_nodes = [];
    collapse(root);
    var maxDepth = 0;
    for (var i = 0; i < data.length; i++) {
        var pageMemberId = data[i].ID;
        find(root, pageMemberId);
        maxDepth = Math.max(maxDepth, last_d.depth);
      }      
    update(root);
    scrollToBottom();
  }
    function scrollToBottom() {
        var svgContainer = $('.svg-container');
        var svgWidth = svgContainer.width();
        var svgHeight = svgContainer.height();
        var fgElement = document.getElementById('fg');
        var fgBBox = fgElement.getBBox();
        var x = last_d.x + fgBBox.width / 2;
        var dx = svgWidth / 2 - x;
        var dy = svgHeight - fgBBox.y;
        var scale = 0.7;
        var duration = 1000;
        svg.transition().duration(duration).call(
          zoom.translate([dx, dy]).scale(scale).event);
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

javascript svg d3.js viewport
© www.soinside.com 2019 - 2024. All rights reserved.