单击svg上的任何位置时，我都尝试具有拖动行为。
这是我尝试过的JSFiddle：https ://jsfiddle.net/d2fx196n/2/
我尝试过的直观的事情是这样的：
svg = d3.select("body")
.append("svg:svg")
.attr("width", 200)
.attr("height", 200)
.style("border", "solid")
.call(drag);
是否有一种简单的方法将拖动行为应用于整个svg，从而使每个对象移动相同？
编辑：我想要更精确的是通过单击svg中的任何位置（甚至是“背景”）来拖动svg内的所有内容。当我拖动时，svg中的所有内容都应一起移动。
EDIT2：基本上，我想具有可以在这里看到的相同行为：http : //jsfiddle.net/superboggly/2hfx3/，但也有行
您可以将svg的内容包装在ag中并对其进行转换，然后在拖动时更新转换。
d3.event公开dx，dy因此您可以在拖动时将其添加到变换中。 var drag = d3.behavior.drag()
//.origin(function (d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended),
data = {
"nodes": [
{ "id": "0", "x": 50, "y": 50 },
{ "id": "1", "x": 100, "y": 50 },
{ "id": "2", "x": 50, "y": 100 },
{ "id": "3", "x": 100, "y": 100 }
],
"edges": [
{ "id": "0", "source": "0", "target": "1" },
{ "id": "1", "source": "2", "target": "3" }
]
},
log = d3.select("body").append("div")
.style({ "background-color": "1px solid #ccc" })
.text("waiting..."),
svg = d3.select("body")
.append("svg:svg")
.attr("width", 200)
.attr("height", 200)
.style("border", "solid")
.call(drag)
.append("g"),
nodes = data.nodes,
links = data.edges;
for (var i in data.edges) {
for (var j in nodes) {
if (nodes[j].id == data.edges[i].source) {
data.edges[i].source = nodes[j];
} else if (nodes[j].id == data.edges[i].target) {
data.edges[i].target = nodes[j];
}
}
}
var lines = svg.selectAll(".line")
.data(links)
.enter()
.append("line")
.attr("x1", function (d) { return d.source.x })
.attr("y1", function (d) { return d.source.y })
.attr("x2", function (d) { return d.target.x })
.attr("y2", function (d) { return d.target.y })
.attr("stroke-width", "4")
.style("stroke", "#000000");
var circles = svg.selectAll("circle.nodes")
.data(nodes)
.enter()
.append("svg:circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", "8px")
.attr("fill", "#FF0000");
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.event.sourceEvent.preventDefault;
console.log("start")
log.text("start")
}
function dragged(e) {
var t = d3.transform(svg.attr("transform")).translate;
svg.attr("transform", "translate(" + [t[0] + d3.event.dx, t[1] + d3.event.dy] + ")")
console.log("drag: " + d3.transform(svg.attr("transform")).translate);
log.text("drag: " + d3.transform(svg.attr("transform")).translate)
}
function dragended(d) {
console.log("end")
log.text("end")
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句