javascript - 拖动未分组在 `g` 标记中的多个元素？

Question

我正在使用 D3 的 drag behavior使用 circleGroup.call(force.drag) 在强制布局中拖动圆形元素, 其中force.drag是一种拖动行为，circleGroup是所有圆元素的选择。这适用于拖动单个元素。

如何一次拖动任意选择的多个圆形元素？

请注意，因为选择必须是任意的，所以我不认为我可以将我想拖在一起的那些放在一个 <g> 中。标签。

我看过these questions仍然无法让它工作。

---

Answer 1

你可以做这样的事情......这不是强制布局，但你应该能够很容易地将它扩展到那样。

单击一个圆圈将其选中，然后单击并拖动到其他位置以移动它们。

基本上，我在数组中跟踪所选圆圈的索引，并更新 drag 处理程序中的相应数据。数据更新后，我接着修改所选圈子的 cx 和 cy 属性。

注意:drag 处理程序附加到覆盖整个 SVG 的透明 rect，我使用 CSS 样式让事件级联到相应的将 pointer-events: all; 正确应用于 rect 的 SVG 元素。

 var width = 500,
   height = 500;

 var data = d3.range(10).map(function(d) {
   return {
     x: parseInt(Math.random() * width),
     y: parseInt(Math.random() * height),
     r: parseInt(Math.random() * 10 + 10)
   }
 });

 var selectedNodes = [],
   selectedData = [];

 var drag = d3.behavior.drag()
   .on("drag", dragged)

 var vis = d3.select("#vis").append("svg")
   .attr("width", width)
   .attr("height", height);

 var dragRect = vis.append("rect")
   .attr("class", "drag")
   .attr("width", width)
   .attr("height", height)
   .call(drag);

 var nodes = vis.selectAll("circle.node")
   .data(data)
   .enter().append("circle")
   .attr("class", "node")
   .attr("r", function(d) {
     return d.r;
   })
   .attr("cx", function(d) {
     return d.x;
   })
   .attr("cy", function(d) {
     return d.y;
   })
   .on("click", clicked);

 function dragged(d) {
   selectedData.forEach(function(i) {
     data[i].x += d3.event.dx;
     data[i].y += d3.event.dy;
   });

   d3.selectAll("circle.node.selected")
     .attr("cx", function(d) {
       return d.x;
     })
     .attr("cy", function(d) {
       return d.y;
     });
 }

 function clicked(d, i) {
   var j = selectedData.indexOf(i);

   if (j === -1) {
     selectedData.push(i);
     d3.select(this).classed("selected", true);
   } else {
     selectedData.splice(j, 1);
     d3.select(this).classed("selected", false);
   }
 }

        rect.drag {
          fill: none;
          pointer-events: all;
        }
        circle.node {
          fill: #000;
        }
        circle.node:hover {
          cursor: pointer;
        }
        circle.node.selected {
          fill: #f00;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="vis"></div>