如何在d3 JavaScript庫中設置拖動行為的Origin（drag.origin）

Question

我正在嘗試使用d3框架為包含HTML文本和背景矩形的組實現拖動行為。 我能夠讓它工作，雖然沒有設置drag.origin我可以看到由於鼠標位置/元素坐標偏移引起的顯着跳躍。 究竟是如何在d3 wiki頁面上描述的雖然頁面描述了如何設置拖動的Origin，但是我沒有正確理解如何在我的例子中實現它。 我嘗試了兩種不同的方法：使用元素將元素組合在一起並定義新元素保持tose。 在第一種情況下，我必須使用translate-function，我甚至不知道如何獲得組的坐標。

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/

Answer 1

您只需相應地設置origin()函數。 在第二種情況下，這很簡單，在第一種情況下有點困難，因為您使用坐標和變換。 基本模式（對於第二種情況）看起來像這樣：

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

在這里更新了jsfiddle。

Answer 2

group元素沒有x / y屬性 - 沒問題！ 創造一個：

var node = svg.append("g")
            .attr('x',x_1)
            .attr('y',y_1)
            .attr("class","node")
            .attr("name","Node_A")
            .attr("transform","translate(" + x_1 + ", " + y_1 +")")
            .call(drag);

什么時候，Lars的.origin功能會起作用

並且不要忘記在拖動時更新x，y屬性：

function dragged() {

    d3.select(this).attr("transform","translate(" + d3.event.x + ", " + d3.event.y +")");
    d3.select(this).attr("x",d3.event.x);
    d3.select(this).attr("y",d3.event.y);
}