Question

使用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>

Answer 1

默认情况下，svg元素的overflow属性设置为hidden。您可以尝试将overflow属性设置为visible

svg {
   overflow: visible;
}

同样，如果没有看到一个有效的例子，很难说这是否对你有用，但也许它可以帮助你。

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

1 个答案: