D3.js:使用origin()函数按组中包含的元素拖动组('g')中的所有内容 [英] D3.js: Dragging everything in group ('g') by element contained in the group using origin() function

问题描述

我不确定发生了什么，但是我设置了两个非常简单的示例来说明我的要求.

I am not sure what's going on, but I have 2 very simple examples set up to show what I am asking.

两个示例都有一个'g'，其中包含一个'rect'和'text'.

Both examples have a 'g' that contains a 'rect' and 'text'.

在第一个示例中，我在'g'本身上设置了拖动，即，如果将鼠标放在该组中的任何位置并拖动，它将拖动整个对象(包括"rect"和"text").观点. http://jsfiddle.net/wup4d0nx/

In the 1st example, I am setting up drag on the 'g' itself, i.e., if you mousedown anywhere in that group and drag, it will drag the entire thing (both 'rect' and 'text') around the viewpoint. 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);

在第二个示例中，这是行不通的，而且是我感兴趣的示例，我只希望文本成为用户可以拖动以拖动整个组的东西.

In the 2nd example, which doesn't work and is what I am interested in, I want ONLY THE TEXT to be something the user can grab to drag the entire group around.

我尝试了许多尝试.有些根本不起作用，有些却可以闪烁，就像我在此处提供的示例一样: http://jsfiddle.net/9xeo7ehf/

I tried many attempts. Some don't work at all, some work but flicker like the example I provide here: 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);

这是怎么回事，它闪烁了，我在做什么错了?

What's going on with this that it flickers and what am I doing wrong?

任何帮助将不胜感激！

谢谢！

推荐答案

在拖放功能内尝试d3.event.sourceEvent.stopPropagation();

这篇关于D3.js:使用origin()函数按组中包含的元素拖动组('g')中的所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！