Question

我想创建一个包含<g>和<circle>的可拖动<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 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);
}

.dotContainer {
  cursor: move;
}

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

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

1 个答案: