Question

我想使用D3js V5创建拖动树。但是当我选择拖动开始时，它会跳转到其他坐标。

我该如何解决？

var dragStartX = null,
        dragStartY = null;
    var svg = d3.select($container).append("svg")
        .call(d3.drag()
            .on("start", function() {
                dragStartX = parseFloat(d3.event.sourceEvent.offsetX);
                dragStartY = parseFloat(d3.event.sourceEvent.offsetY);
                console.log("start", dragStartX, dragStartY);
            })
            .on("drag", function() {
                var g = d3.select(this).selectAll("g.containerG");


                dragStartX += parseFloat(d3.event.dx);
                dragStartY += parseFloat(d3.event.dy);
                g.attr("transform", "translate(" +
                    dragStartX + "," + dragStartY + ")");
            })
            .on("end", function() {
                console.log("end", dragStartX, dragStartY);
                dragStartX = null;
                dragStartY = null;
                console.log("null", dragStartX, dragStartY);
            }))

Answer 1

我为此使用了d3.zoom。

var zoom = d3.zoom() .extent([[margin.left, margin.top], [width, height]]) .scaleExtent([1, 1]) .on("zoom", zoomed);

然后调用svg选择上的zoom，并在zoom事件上更改transform属性。

演示：http://jsfiddle.net/b4xcg2sj/35/

D3js v5树可拖动

1 个答案: