如何在D3.js中拖動group（g）元素？

Question

我想創建一個包含<circle>和<text>的可拖動<g>元素但是我失敗了。

現在我有這個代碼：

 var margin = {top: -5, right: -5, bottom: -5, left: -5}, width = 1960 - margin.left - margin.right, height = 1500 - margin.top - margin.bottom; var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var dotContainer = svg.append("g") .attr("class", "dotContainer") .datum({x:220, y:120}) .attr("x", function(d) { return dx; }) .attr("y", function(d) { return dy; }) .call(drag); var dot = dotContainer.append("circle") .attr("class", "dot") .datum({x:220, y:120}) .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .attr("r", 5).call(drag); var text = dotContainer.append("text") .datum({x:220, y:120}) .attr("x", function(d) { return dx; }) .attr("y", function(d) { return dy; }) .text('Title'); function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true); } function dragged(d) { d3.select(this).attr("cx", dx = d3.event.x).attr("cy", dy = d3.event.y); } function dragended(d) { d3.select(this).classed("dragging", false); } 

 <script src="https://d3js.org/d3.v3.min.js"></script> 

<circle>元素完全可拖動，好的。 但是我需要將拖動應用到整個<g>元素以將我的圓圈與<text>元素一起拖動。

我怎樣才能做到這一點？

當我將call(drag)應用於dotContainer

dotContainer.call(drag);

什么都行不通

Answer 1

你應該這樣重寫你的dotContainer變量：

var dotContainer = svg.append("g")
    .attr("class", "dotContainer")
    .datum({x:220, y:120})
    .attr("transform", function(d) { return 'translate(' + d.x + ' '+ d.y + ')'; })
    .call(drag);

刪除dot變量的.call(drag)並重寫dragged函數，如下所示：

function dragged(d) {
  d.x += d3.event.dx;
  d.y += d3.event.dy;

  d3.select(this).attr("transform", function(d,i){
    return "translate(" + [ d.x,d.y ] + ")"
  });
}

因此，我們在初始容器位置和拖動期間的位置更新中使用transform屬性。

檢查隱藏代碼段中的演示：

 var margin = {top: -5, right: -5, bottom: -5, left: -5}, width = 1960 - margin.left - margin.right, height = 1500 - margin.top - margin.bottom; var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var dotContainer = svg.append("g") .attr("class", "dotContainer") .datum({x:20, y:20}) .attr("transform", function(d) { return 'translate(' + dx + ' '+ dy + ')'; }) .call(drag); var dot = dotContainer.append("circle") .attr("class", "dot") .datum({x:20, y:20}) .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .attr("r", 5) var text = dotContainer.append("text") .datum({x:20, y:20}) .attr("x", function(d) { return dx; }) .attr("y", function(d) { return dy; }) .text('Title'); function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true); } function dragged(d) { dx += d3.event.dx; dy += d3.event.dy; d3.select(this).attr("transform", function(d,i){ return "translate(" + [ dx,dy ] + ")" }); } function dragended(d) { d3.select(this).classed("dragging", false); } 

 .dotContainer { cursor: move; } 

 <script src="https://d3js.org/d3.v3.min.js"></script>