如何在D3的徑向Reingold-Tilford樹中使節點的拖放工作？

我正在實施Radial Reingold-Tilford樹（http://bl.ocks.org/mbostock/4063550），但隨着平移和縮放的基本示例，拖動以及可摺疊的可點擊節點。我已經能夠實現它的大部分。然而，我需要的另一件事是將不同節點拖放到其他節點。我也能夠實現這一點，但拖動時我也想顯示鏈接/臨時連接器，但以徑向視圖實現它變得很麻煩。如何在D3的徑向Reingold-Tilford樹中使節點的拖放工作？

在這之後我該怎麼辦，這是我現在的工作代碼。

http://jsfiddle.net/rabimba/d6DVn/1/

我需要首先正確地計算它的部分，而draglistener應該是

   relCoords = d3.mouse($('svg').get(0)); 
      if (relCoords[0] < panBoundary) { 
       panTimer = true; 
       pan(this, 'left'); 
      } else if (relCoords[0] > ($('svg').width() - panBoundary)) { 

       panTimer = true; 
       pan(this, 'right'); 
      } else if (relCoords[1] < panBoundary) { 
       panTimer = true; 
       pan(this, 'up'); 
      } else if (relCoords[1] > ($('svg').height() - panBoundary)) { 
       panTimer = true; 
       pan(this, 'down'); 
      } else { 
       try { 
        clearTimeout(panTimer); 
       } catch (e) { 

       } 
      } 

      d.x0 += d3.event.dy; 
      d.y0 += d3.event.dx; 
      var node = d3.select(this); 
      node.attr("transform", "translate(" + d.y0 + "," + (d.x - 90)+ ")"); 
      updateTempConnector(); 
     })

然後我可以就在連接器上的工作。我已儘可能地評論。

來源

2014-07-21 Rabimba Karanjai

在您的撥弄，我們得到一個錯誤， dofocus沒有定義的檢查它一次。好吧 –

是的。好的，可以。這部分代碼在這裏不需要。這是我爲JSON的內部操作，我只是硬編碼的小提琴。你可以放心地忽略這個 –

Hi @RabimbaKaranjai由於這個例子取自我的代碼http://www.robschmuecker.com/d3-js-drag-and-drop-zoomable-tree/我可以sefly說你不應該現在擔心上述片段的平移。在任何情況下，平移似乎都能正常工作，但拖動節點的位置與'tempConnector'一起錯誤！ –

我看到問題是節點設置了其值x和y值的方式。（「transform」，function（d）{ return「rotate（」+（dx-90）+「）translate（」+ dy +「）」;它們的實際位置是由transform函數決定的。

這意味着，在SVG畫布實際x和y座標的角度d.x-90和它們的深度y的函數。這意味着updateTempConnector沒有得到真正的xy座標，使線條看上去連接到mouseOver節點
我建議你看看複雜三角體嘗試獲得實際的座標或在我已經設法取得一些有限進展的地方擺弄小提琴！

特別是，通過在overCircle

source: { 
       x: (selectedNode.position.left - ($('svg g').first().offset().left) - ($('svg g')[0].getBoundingClientRect().width/2)) + radius, 
       y: (selectedNode.position.top - ($('svg g').first().offset().top) - ($('svg g')[0].getBoundingClientRect().height/2)) + radius 
      }

實施例使用這些值作爲源，用於從this參考得到的tempLink：http://jsfiddle.net/robschmuecker/GFe96/3/

來源

2014-07-21 10:37:57

+1不錯！ – FernOfTheAndes

謝謝@Rob。我只是通過電子郵件。我看到節點拖動正在工作。我正在探索一條替代路線來實現它，感謝您的更新，我可能會設法做到這一點。我會在這裏繼續更新 –

如何在D3的徑向Reingold-Tilford樹中使節點的拖放工作？

回答

相關問題