如何在d3 JavaScript库中设置拖动行为的Origin（drag.origin） [英] How to set the Origin (drag.origin) for drag behavior in d3 JavaScript library

问题描述

我试图使用d3框架来实现由HTML文本和背景矩形组成的组的拖动行为。我能够得到它的工作，虽然当没有设置drag.origin我可以看到明显的跳跃由于鼠标位置/元素坐标偏移。具体如何在 d3 wiki页面上描述
虽然页面描述如何设置原点拖动，我不能正确理解如何在我的示例中实现它。我尝试了两种不同的方法：使用元素将元素分组在一起并定义新元素保持tose。在第一种情况下，我必须使用translate函数，我甚至不知道如何获取组的坐标。

I am trying to implement drag behavior for group consisting from HTML-text and background-rectangle using the d3 framework. I was able to get it working, although when not setting the drag.origin I can see noticeable jump due to the mouse-position/element-coordinates offset. Exactly how described on the d3 wiki-page Although the page described how to set the Origin for dragging, I do not properly understand how ti implement it in my example. I tried two different approaches : using the element for grouping the elements together and defining new element holding tose. In the first case I have to use the translate-function and I do not even know how to get the coordinates of the group.

var svg = d3.select("body").append("svg")
  .attr("width", 960)
  .attr("height", 500);

var group = svg.append("svg:g")
  .attr("transform", "translate(10, 10)")
  .attr("id", "group");

var rect1 = group.append("svg:rect")
  .attr("rx", 6)
  .attr("ry", 6)
  .attr("x", 5/2)
  .attr("y", 5/2)
  .attr("id", "rect")
  .attr("width", 250)
  .attr("height", 125)
  .style("fill", 'white')
  .style("stroke", d3.scale.category20c())
  .style('stroke-width', 5);


var html1 = group.append("foreignObject")
  .attr("x", 50)
  .attr("y", 25)
  .attr("width", 200)
  .attr("height", 100)
  .attr("id", "fobject")
  .style("border-color", d3.scale.category20c())
  .append("xhtml:div")
  .style("font", "14px 'Helvetica Neue'")
  .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");

var innerSvg = svg.append("svg")
  .attr("x", 500)
  .attr("y", 10)
  .attr("id", "innerSvg");

var rect2 = innerSvg.append("svg:rect")
  .attr("rx", 6)
  .attr("ry", 6)
  .attr("x", 5/2)
  .attr("y", 5/2)
  .attr("id", "rect")
  .attr("width", 250)
  .attr("height", 125)
  .style("fill", 'white')
  .style("stroke", d3.scale.category20c())
  .style('stroke-width', 5);

var html2 = innerSvg.append("foreignObject")
  .attr("x", 50)
  .attr("y", 25)
  .attr("width", 200)
  .attr("height", 100)
  .attr("id", "fobject")
  .style("border-color", d3.scale.category20c())
  .append("xhtml:div")
  .style("font", "14px 'Helvetica Neue'")
  .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");

var drag1 = d3.behavior.drag()
    .on("drag", function(d,i) {
        d3.select(this).attr("transform", function(d,i){
            return "translate(" + [ d3.event.x,d3.event.y ] + ")"
        })
    });

var drag2 = d3.behavior.drag()
    .on("drag", function(d,i) {
        d3.select(this)
        .attr("x", d3.event.x)
        .attr("y", d3.event.y);
    });

group.call(drag1);
innerSvg.call(drag2);

我非常感谢任何解释，自然我在这里准备了一个工作示例： http://jsfiddle.net/Y8y7V/

I would very appreciate any explanation, naturally I prepared a working example here : http://jsfiddle.net/Y8y7V/

推荐答案

你只需要设置 origin（）函数。在第二种情况下，这是直接的，在第一种情况有点更加困难，因为你使用坐标以及变换。基本模式（对于第二种情况）如下所示：

You simply need to set the origin() function accordingly. In the second case this is straightforward, in the first case somewhat more difficult because you are using coordinates as well as a transform. The basic pattern (for the second case) looks like this:

 .origin(function() { 
        var t = d3.select(this);
        return {x: t.attr("x"), y: t.attr("y")};
    })

更新了jsfiddle 这里。

Updated jsfiddle here.

这篇关于如何在d3 JavaScript库中设置拖动行为的Origin（drag.origin）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！