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。