d3折叠树缩放和点击节点后的平移 [英] d3 collapse tree zoom and pan - jumpiness after clicking a node

问题描述

如果我在点击节点后进行缩放/平移，则缩放和缩放会跳回到原始位置。

If I zoom/pan after I clicked a node my scaling and zooming jumps back to original position.

这是我的缩放功能：

zoom: function() {
var scale = d3.event.scale,
    translation = d3.event.translate,
    tbound = -h * scale,
    bbound = h * scale,
    lbound = (-w + m[1]) * scale,
    rbound = (w - m[3]) * scale;
// limit translation to thresholds
translation = [
    Math.max(Math.min(translation[0], rbound), lbound),
    Math.max(Math.min(translation[1], bbound), tbound)
];
d3.select(".drawarea")
    .attr("transform", "translate(" + translation + ")" +
          " scale(" + scale + ")");
}

我知道我需要保存缩放和重用它们的值，不知道如何。

I know that I need to stash the values for zooming and reuse them but I do not know how.

我目前没有工作的jsfiddle我的代码，但我发现这一个有同样的问题。

I don't have a working jsfiddle of my code at the moment, but I found this one which has the same problem.

这是我的结构：

            postCreate: function () {...},

//--------------------------------------------------------------

            getTreeStructureFromMapModel: function () {...},

            _getDiagonal: function () {...},

            getDrawingArea: function (w, h) {...},

//--------------------------------------------------------------

            update: function (source) {...},

            updateTheNodes: function (source, root) {...},

            enterNewNodesAtParentsOldPosition: function (source, root, node) {...},

            transitionNodesToTheirNewPosition: function (node) {...},

            transitionExistingNodesToParentsNewPosition: function (node, source) {...},

//--------------------------------------------------------------

            updateTheLinks: function (source) {...},

            enterNewLinksAtParentsOldPosition: function (link, source) {...},

            transitionLinksToTheirNewPosition: function (link) {...},

            transitionExistingLinksToParentsNewPosition: function (link, source) {...},

//--------------------------------------------------------------

            onNodeClick: function () {...},

            toggleAll: function (d) {...},

            toggle: function (d) {...},

            zoom: function() {...}

我把用于在 postCreate（）中添加缩放函数的代码放在

I put the the code for adding the zoomfunction inside postCreate().

这里是我的postCreate： p>

Here is my postCreate:

postCreate: function () {
    this.inherited(arguments);

    var d3 = this.d3;
    this._i = 0;

    var margins = this.margins;
    var w = this._w = 900 - margins.left - margins.right;
    var h = this._h = 900 - margins.top - margins.bottom;

    this._tree = d3.layout.tree()
        .size([h, w]);

    his._drawingArea = this.getDrawingArea(w, h);

    d3.select("svg")
        .call(d3.behavior.zoom()
        .scaleExtent([0.5, 5])
        .on("zoom", this.zoom));

    var root = this._root = this.getTreeStructureFromMapModel();
    root.x0 = h / 2;
    root.y0 = 0;

    this.toggleAll(root);
    this.update(root);
},

vis创建于 getDrawingArea / code>：

The vis is created in getDrawingArea():

getDrawingArea: function (w, h) {
    var margins = this.margins;

    var vis = this.d3.select(this.domNode).append("svg:svg")
        .attr("width", w + margins.left + margins.right)
        .attr("height", h + margins.top + margins.bottom)
        .append("svg:g")
        .attr("class", "drawarea")
        .append("svg:g")
        .attr("transform", "translate(" + margins.left + "," + margins.top + ")")
    return vis;

 },

推荐答案

将缩放行为附加到更新函数之外的SVG的代码。工作示例此处。

Move the code that attaches the zoom behaviour to the SVG outside the update function. Working example here.

这篇关于d3折叠树缩放和点击节点后的平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！