如何在D3.js中拖动组（g）元素？

Question

我想制作一个<g>包含a <circle>和a 的可拖动元素，<text>但失败了。

现在我有这段代码：

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 d.x; })
    .attr("y", function(d) { return d.y; })
    .call(drag);

var dot = dotContainer.append("circle")
    .attr("class", "dot")
    .datum({x:220, y:120})
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 5).call(drag);

var text =  dotContainer.append("text")
    .datum({x:220, y:120})
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .text('Title');  



function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.select(this).classed("dragging", true);
}

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = 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);

删除.call(drag)的dot变量和重写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 dotContainer = svg.append("g")
    .attr("class", "dotContainer")
    .datum({x:220, y:120})
    .attr("transform", function(d) { return 'translate(' + d.x + ' '+ d.y + ')'; })
    .call(drag);

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 ] + ")"
  });
}

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(' + d.x + ' '+ d.y + ')'; })
    .call(drag);

var dot = dotContainer.append("circle")
    .attr("class", "dot")
    .datum({x:20, y:20})
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 5)

var text =  dotContainer.append("text")
    .datum({x:20, y:20})
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .text('Title');  

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.select(this).classed("dragging", true);
}

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 ] + ")"
  });
}

function dragended(d) {
  d3.select(this).classed("dragging", false);
}