javascript - D3.js:使用 origin() 函数按组中包含的元素拖动组 ('g' 中的所有内容

Question

我不确定发生了什么，但我设置了 2 个非常简单的示例来说明我的问题。

两个示例都有一个包含“rect”和“text”的“g”。

在第一个示例中，我在“g”本身上设置了拖动，即，如果您在该组中的任何地方按下鼠标并拖动，它将拖动整个东西(包括“rect”和“text”)观点。 http://jsfiddle.net/wup4d0nx/

var chart = d3.select("body").append("svg")
   .attr("height", 500)
   .attr("width", 500)
   .style("background", "lightgrey");

var group = chart.selectAll("g")
    .data(["Hello"])
    .enter()
    .append("g")
    .attr("id", function (d) { return d;});

var rect = group.append("rect")
    .attr("stroke", "red")
    .attr("fill", "blue")
    .attr("width", 200)
    .attr("height", 200)
    .attr("x", 10)
    .attr("y", 10);

var label = group.append("text")
    .attr("x", 40)
    .attr("y", 40)
    .attr("font-size", "22px")
    .attr("text-anchor", "start")
    .text(function (d) { return d;});

// Set up dragging for the entire group
var dragMove = function (d) {
    var x = d3.event.x;
    var y = d3.event.y;
    d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
};


var drag = d3.behavior.drag()
    .origin(function (data) {
        var element = d3.select("#" + data);
        return {
            x: d3.transform(element.attr("transform")).translate[0],
            y: d3.transform(element.attr("transform")).translate[1]
        };
    })
    .on("drag", dragMove);

group.call(drag);

在第二个示例中，它不起作用但我感兴趣的是，我只希望文本成为用户可以捕获以拖动整个组的东西。

我尝试了很多次。有些根本不工作，有些工作但像我在这里提供的例子一样闪烁: http://jsfiddle.net/9xeo7ehf/

var chart = d3.select("body").append("svg")
    .attr("height", 500)
    .attr("width", 500)
    .style("background", "lightgrey");

var group = chart.selectAll("g")
    .data(["Hello"])
    .enter()
    .append("g")
    .attr("id", function (d) { return d;});

var rect = group.append("rect")
    .attr("stroke", "red")
    .attr("fill", "blue")
    .attr("width", 200)
    .attr("height", 200)
    .attr("x", 10)
    .attr("y", 10);

var label = group.append("text")
    .attr("x", 40)
    .attr("y", 40)
    .attr("font-size", "22px")
    .attr("text-anchor", "start")
    .text(function (d) { return d;});

// Set up dragging for the entire group USING THE LABEL ONLY TO DRAG
var dragMove = function (d) {
    var x = d3.event.x;
    var y = d3.event.y;
    d3.select(this.parentNode).attr("transform", "translate(" + x + "," + y + ")");
};


var drag = d3.behavior.drag()
    .origin(function (data) {
        var element = d3.select("#" + data);
        return {
            x: d3.transform(element.attr("transform")).translate[0],
            y: d3.transform(element.attr("transform")).translate[1]
        };
    })
    .on("drag", dragMove);

label.call(drag);

它闪烁是怎么回事，我做错了什么？

如有任何帮助，我们将不胜感激!

谢谢!

Answer 1

我不确定它闪烁的确切原因(因为我不太熟悉 D3)，但让它停止的一种方法是使用 D3 的源事件:

// 50 is the offset x/y position you set for your text
var x = d3.event.sourceEvent.pageX - 50;
var y = d3.event.sourceEvent.pageY - 50;

编辑:虽然上面的代码有效，但它会导致框最初“跳转”到文本的坐标，更好的解决方法是采用您的第一个示例并仅过滤未在文本上执行的事件元素。尝试将以下内容放在 dragMove 方法的顶部:

if(d3.event.sourceEvent.target.nodeName !== 'text') {
    return;
}