使用d3.behavior.drag，如何使拖动图像在svg元素外部可见

jean-pierre lougrat 发表于 Dev

吉恩·皮埃尔·卢格拉特

使用d3.behavior.drag()，有一种方法可以使拖动的图像在其父svg元素边界之外可见。

在我的应用程序中，我有一个基于HTML网格的顶部布局（使用flexBox），并且每个网格单元中都有几个D3.js图。每个图都以SVG元素及其子元素构建。

我需要拖放功能才能在这些图之间复制/移动元素。像现在一样，该功能正常工作，但是当我越过源图的边界时拖动图像消失了。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    svg {
        float: left;
        border-bottom: solid 1px #ccc;
        border-right: solid 1px #ccc;
        margin-right: -1px;
        margin-bottom: -1px;
    }

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

    var width = 240,
            height = 125,
            radius = 20;

    var overSVG;

    var drag = d3.behavior.drag()
            .origin(function (d) {
                return d;
            })
            .on("drag", dragmove)
            .on("dragend", dragend);

    var svg = d3.select("body").append("div").selectAll("svg")
            .data(d3.range(2).map(function (v, i) {
                return {
                    svgElement: i,
                    x    : width / 2,
                    y    : height / 2
                };
            }))
            .enter().append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("id", function (d, i) {
                return "svg_" + i
            })
            .on("mouseover", over)
            .on("mouseout", out);

    svg.append("circle")
            .attr("r", radius)
            .attr("cx", function (d) {
                return d.x;
            })
            .attr("cy", function (d) {
                return d.y;
            })
            .attr("svgElement", function (d, i) {
                return i;
            })
            .call(drag);

    function over(d, i) {
        overSVG = d;
        var selectedNodeId = "#svg_" + i;
        d3.select(selectedNodeId)
                .attr("fill", 'red');
    }
    function out(d, i) {
        overSVG = "";
        var selectedNodeId = "#svg_" + i;
        d3.select(selectedNodeId)
                .attr("fill", 'blue');
    }

    function dragmove(d) {
        d3.select(this)
                .attr("cx", d.x = d3.event.x)
                .attr("cy", d.y = d3.event.y);

        console.log("drag move", this, d3.event.x, ' ', d3.event.y);
    }
    function dragend(d) {
        console.log("==>drag Ended :");
        console.log("   dragged circle", this);
        console.log("   from svg ", d);
        console.log("   to",  overSVG);
    }

</script>