如何使用d3js拖动完整的svg？

Question

单击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/ ，但也有行

Answer 1

战略

您可以将svg的内容包装在ag中并对其进行转换，然后在拖动时更新转换。

策略

1. d3.event公开了dx和dy因此您可以在拖动时将它们添加到变换中。
2. d3 Math模块中有一个方便的用于转换的API，您可以使用它来避免解析g元素的transform属性的麻烦。

码

  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 dx; }) .attr("cy", function (d) { return dy; }) .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>