使用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>最佳答案
默认情况下，svg 元素的 overflow 属性设置为 hidden。
您可以尝试将 overflow 属性设置为 visible
svg {
overflow: visible;
}
同样，在没有看到有效示例的情况下，很难判断这是否适合您，但也许它会有所帮助。
关于d3.js - 使用 d3.behavior.drag，如何保持拖动图像在 svg 元素外部可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33753477/