Tukukkk

I have the following code in D3 (from basic examples) for panning and zooming a canvas - and the second code block for dragging individual elements. What I would like is to both be able to pan/zoom on the entire canvas and also be allowed move a single object around when user's drag starts on a specific object.

The pan/zoom code I have is:

var svgCanvas = d3.select('body')

    .append("svg:svg")

    .attr("width", 800)

    .attr("height", 800)



var g = svgCanvas.append("g")



$('body').append(

    $("<div>", {id: "canvas-wrapper" })

        .append("<div/>", { id: "canvas" })

);



var svg = d3.select("svg");

var canvas = d3.select("#canvas");

var canvasWrapper = d3.select("#canvas-wrapper");



var root = svg.append("g");



root.append("rect")

    .attr("x", 50).attr("y", 50)

    .attr("width", 50).attr("height", 50)

    .style("fill", "blue")

    .style("stroke", "green").style("stroke-width", "3px");



root.append("rect")

    .attr("x", 150).attr("y", 150)

    .attr("width", 50).attr("height", 50)

    .style("fill", "blue")

    .style("stroke", "green").style("stroke-width", "3px");



var zoom = d3.zoom()

    .scaleExtent([1, 8])

    .on("zoom", function () {

        var t = d3.event.transform;

        root.attr("transform", t);

        canvas.style("transform", "translateX(" + t.x + "px) translateY(" + t.y + "px) scale(" + t.k + ")")

    });



canvasWrapper.call(zoom);

The drag code I have is:

var svg = d3.select('body')

    .append("svg:svg")

    .attr("width", 800)

    .attr("height", 800)



var nodes = svg

    .selectAll('.node')

    .data([

        { x: 10, y: 10 }, 

        { x: 100, y: 100 }

    ])

    .enter()

    .append('g')

    .attr('class', 'node')

    .attr("transform", function (data) {

        return "translate(" + [data.x, data.y] + ")";

    })

    .call(function () {

        return d3.drag()

            .on('drag', function (d, i) {

                d.x += d3.event.dx;

                d.y += d3.event.dy;

                d3.select(this).attr("transform", function () {

                    return "translate(" + [d.x, d.y] + ")";

                });

            })

            .on('start', function (d, i) {})

            .on('end', function (d, i) {});

    }());



nodes.append("svg:rect")

    .attr("width", 100)

    .attr("height", 100)

    .style("fill", "red")

What do I need to do to allow dragging each object individually - in addition to drag on the entire canvas when user drags on an open are?

Obviously the difference between the two code sections is that one is working on entire canvas and one on individual elements (the first has the additional outer container) - how can I combine the two?

I have tried to simply combine the two code examples by adding nodes to the outer container and add drag handling to each node but the canvas seems to capture all events thus ignoring the drag on nodes.

The combined non-working code:

d3.select('body')

    .append("svg:svg")

    .attr("width", 800)

    .attr("height", 800);



$('body').append(

    $("<div>", {

        id: "canvas-wrapper"

    }).append("<div/>", {

        id: "canvas"

    })

);



var svg = d3.select("svg");

var canvas = d3.select("#canvas");

var canvasWrapper = d3.select("#canvas-wrapper");



var root = svg.append("g");



var nodes = root

    .selectAll('.node')

    .data(dataArray)

    .enter()

    .append('g')

    .attr('class', 'node')

    .attr("transform", function (data) {

        return "translate(" + [data.x, data.y] + ")";

    })

    .call(function () {

        return d3.drag().on('drag', function (d, i) {

            d.x += d3.event.dx;

            d.y += d3.event.dy;

            d3.select(this).attr("transform", function () {

                return "translate(" + [d.x, d.y] + ")";

            });

        })

    }());



nodes.append("svg:rect")

    .attr("width", 50)

    .attr("height", 50)

    .style("fill", "#ffb5b5")

    .style("fill", "#ffb5b5")

    .style("stroke", "green").style("stroke-width", "3px");



var zoom = d3.zoom()

    .scaleExtent([1, 8])

    .on("zoom", function () {

        var t = d3.event.transform;

        root.attr("transform", t);

        canvas.style("transform", "translateX(" + t.x + "px) translateY(" + t.y + "px) scale(" + t.k + ")")

    });



canvasWrapper.call(zoom);

SOLVED:

By detecting mouse event locations in the canvas one may hide/show the canvas which is overlaying the SVG canvas. Therefore when there are mouse events which are started over a node then canvas should be hidden allowing drag to function while other events should be caught by canvas allowing pan/zoom

As the first thing add a rect to the svg and call zoom on this rect. Any mouse event not catched by an element will be used for zoom, remove the canvas wrapper.

For Chrome you can call zoom on the svg, no need for the additional rect.

var dataArray = [{x:100, y:100}, {x:200, y:200}];



var svgWidth = 800, svgHeight = 800;



var svg = d3.select('body')

    .append("svg:svg")

    .attr("width", svgWidth)

    .attr("height", svgHeight);

var zoomRect = svg.append('rect')

    .attr("width", svgWidth)

    .attr("height", svgHeight)

    .attr("fill", "white");



var root = svg.append("g");



var nodes = root

    .selectAll('.node')

    .data(dataArray)

    .enter()

    .append('g')

    .attr('class', 'node')

    .attr("transform", function (data) {

        return "translate(" + [data.x, data.y] + ")";

    })

    .call(function () {

        return d3.drag().on('drag', function (d, i) {

            d.x += d3.event.dx;

            d.y += d3.event.dy;

            d3.select(this).attr("transform", function () {

                return "translate(" + [d.x, d.y] + ")";

            });

        })

    }());



nodes.append("svg:rect")

    .attr("width", 50)

    .attr("height", 50)

    .style("fill", "#ffb5b5")

    .style("stroke", "green").style("stroke-width", "3px");



var zoom = d3.zoom()

    .scaleExtent([1, 8])

    .on("zoom", function () {

        var t = d3.event.transform;

        root.attr("transform", t);

        //canvas.style("transform", "translateX(" + t.x + "px) translateY(" + t.y + "px) scale(" + t.k + ")");

    });



zoomRect.call(zoom);

<script src="http://d3js.org/d3.v5.min.js"></script>