Zoomable和Draggable折線圖

Question

我想繪製一個具有可縮放和可拖動屬性的圖表。

放大後那些有子元素應該顯示像下面的圖像。

我沒有發現過它的任何線索。

Answer 1

看看你發佈的圖表，沒有直接的d3傳輸，以這種螺旋方式排列節點。但是，如果您知道需要放置節點的位置，則可以進行強制佈局。

是的，你有可用的節點拖動鏈接將得到相應的更新。附上小提琴，您可以即興創作並將圖像添加到節點。節點的數據應該是這樣的：

"nodes": [{ 
     "x": 30,// as i said you need to provide the x coordinate where to put the node 
     "y": 30, 
     fixed: true,//so that the force layout don't move it 
     name: "Start", //text to be displayed 
     display: "none",// set this as none if you dont want the circle 
     tx: 5, //x placement of text on node 
     ty: -5 //y placement of text on node 
    }, { 
     "x": 200, 
     "y": 30, 
     fixed: true, 
     name: "A" 
    }, 

這是我的fiddle。