如何使用 d3.js 拖动行为拖动 svg 组? [英] How to drag an svg group using d3.js drag behavior?

问题描述

我正在使用 D3js 拖动.单个元素被完美地拖动.但我想拖动一组元素.怎么做.这是我的 Js Fiddle 链接:

I am using D3js drag. single element is get dragged perfectly fine. but i want to drag a group of elements.How it can be done. Here is what is on my Js Fiddle link:

  function onDragDrop(dragHandler, dropHandler) {
        var drag = d3.behavior.drag();

    drag.on("drag", dragHandler)
    .on("dragend", dropHandler);
    return drag;
    }

    var g = d3.select("body").select("svg").append("g")
    .data([{ x: 50, y: 50 }]);

    g.append("rect")
    .attr("width", 40)
    .attr("height", 40)
    .attr("stroke", "red")
    .attr("fill","transparent")
    .attr("x", function (d) { return d.x; })
    .attr("y", function (d) { return d.y; })
    .call(onDragDrop(dragmove, dropHandler));

    g.append("text")
    .text("Any Text")
    .attr("x", function (d) { return d.x; })
    .attr("y", function (d) { return d.y; })
    .call(onDragDrop(dragmove, dropHandler));

    function dropHandler(d) {
       // alert('dropped');
    }

    function dragmove(d) {
        d3.select(this)
      .attr("x", d.x = d3.event.x)
      .attr("y", d.y = d3.event.y);
    }

我想同时拖动矩形和文本.这是我尝试的方法，但没有运气.我认为缺少一些简单的东西.

I want to drag both rect and text simultaneously. Here is what I tried, but no luck. I think am missing something simple.

推荐答案

首先，<g> 元素不关心 x 和 y 属性(如:它们只是被忽略).您可以改用 transform="translate(x,y)".

First off, the <g> element doesn't care about xand y attributes (as in: they're just ignored). You can use transform="translate(x,y)" instead.

其次，您需要检查在 dragmove 处理程序中获得的元素实际上是 <g> 元素，而不是它的子元素.这是因为 <g> 元素本身没有实际的命中区域.但是他们的孩子会这样做，鼠标事件首先到达孩子，然后冒泡到父母.您可以检查 evt.target 和 evt.currentTarget 以查看此操作.target 是最初被命中的元素，currentTarget 是当前正在处理事件的事件目标(例如，如果事件冒泡，则为 元素).

Second, you will need to check that the element you get in the dragmove handler actually is the <g> element, and not a child element of it. This is because <g> elements have no actual hit area themselves. Their children do though, and the mouse events first go to the children then bubble up to the parent. You can inspect evt.target and evt.currentTarget to see this in action. target is the element that was hit originally, currentTarget is the event target that is currently handling the event (e.g the <g> element if the event bubbled up).

这篇关于如何使用 d3.js 拖动行为拖动 svg 组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！