d3树形图-限制缩放,平移

时间:2019-10-15 04:48:34

标签: javascript d3.js

我有d3v4树状图。我应该能够使用平移/缩放限制来缩放和平移树。

使用缩放和平移效果。使用scaleExtent限制了缩放。

svg.call(d3.zoom().on('zoom', () => { g.attr('transform', d3.event.transform) }) .scaleExtent([0.5, 3]));

但无法限制平移(拖动)。

高度和宽度是根据节点数动态计算的。

this.svg.call(d3.zoom().on('zoom', () => {
        const scale = d3.event.scale;
        d3.event.transform.y = (height / 2);
        d3.event.transform.x = Math.min(d3.event.transform.x, 5);
        d3.event.transform.x = Math.max(d3.event.transform.x, (1 - d3.event.transform.k) * width );


        // I have tried this but couldn't able to drag backwards
        this.wrapperG.attr("transform", d3.event.transform.toString().replace(/scale\((.*?)\)/) + "scale(" + scale + ")");
        })
        .scaleExtent([0.5, 3]));

想听听建议使这项工作有效, 预先感谢!

0 个答案:

没有答案