使用D3在分組元素上拖動

我試圖使用d3.behavior.drag函數將&文本/形狀拖動到不同的位置。最後，我希望當它從原始位置移動到由Ruby on Rails運行的SQL DB中時，保存新位置的變量。使用D3在分組元素上拖動

然而，在那一刻，我已經盡我當前的代碼，文本/圖形不動，反而似乎複製在同一位置：

  var drag = d3.behavior.drag() 
         .origin(Object) 
         .on("drag", function(d) { 
         d.x = d3.event.x; 
         d.y = d3.event.y; 
         draw(); 
        });

然後，我有一個函數「畫」我的文/形狀&位置

    function draw() { 

       // code is within here - check fiddle 

       } 

        draw()

我開始相信，它不是工作，因爲我使用的是翻譯，而不是X &Ÿ我的對象中：

   var node= [ {name:'amy', country: 'USA', 'translate:"translate(190,83)"}]

一些例子我見過有這個：

   var node= [ {name:'amy', country: 'USA', x: 100, y:0}]

我也嘗試過這種方式，但是當我將形狀拖到它的葉子重複形狀的痕跡。

我將不勝感激，如果有人可以解釋爲什麼發生這種情況/

來源

2013-04-16 Jose

變化轉換成X和Y的所有節點和更改

node= node.enter().append("g") 
       .call(drag)

到

node.enter().append("g") 
      .call(drag) 
      .attr('class', 'node');

工作小提琴：http://jsfiddle.net/Zc4z9/5/

您可能想要請檢查此bl.ocks.org/mbostock/3808218以確保您瞭解.enter（）[以及.transition（）和.exit（）]

來源

2013-04-16 22:05:54

您正在獲得大膽的外觀元素，因爲新形狀和文本是每次拖動時都會添加。多個分層元素使文本看起來粗體。它可以通過修改你的拖曳函數來修正，所以它不需要再次調用draw（）來改變g.node元素的位置。看第57行和第58行：http://jsfiddle.net/Zc4z9/8/ –

使用D3在分組元素上拖動

回答

相關問題