d3 折叠树缩放和平移 - 单击节点后的跳跃

Question

如果我在单击节点后缩放/平移，我的缩放和缩放会跳回原始位置。

这是我的缩放功能：

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

我知道我需要存储缩放值并重复使用它们，但我不知道如何。

目前我的代码没有可用的 jsfiddle，但我发现 this one 有同样的问题。

这是我的结构：

            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()里面。

这是我的帖子创建：

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():

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;

 },

Answer 1

将附加缩放行为的代码移到update 函数之外的SVG。工作示例here。