可缩放和可拖动折线图答案

【问题标题】：Zoomable And Draggable Line chart可缩放和可拖动折线图
【发布时间】：2015-09-07 07:52:42
【问题描述】：

我想绘制一个具有可缩放和可拖动属性的图表。

缩放后那些有子元素的应该如下图所示。

我没有找到任何线索。

【问题讨论】：

我不知道是谁降级了这个问题，如果你不知道答案就不要那样做。
这是一个很好的问题，我不知道为什么它被否决了。点赞+
该问题不包含代码，它没有显示 OP 如何做他正在做的事情，也没有显示任何解决方案的尝试。有很多问题演示了 d3 中的缩放和拖动。当 OP 研究他们时，阻止他/她使用该信息来实施解决方案的问题是什么。简而言之，您认为这个问题是否显示了研究工作？
@RobertLongson 所以你认为我无法搜索缩放或拖动
如果你有常识，你应该明白，因为我添加了一个 D3 的标签，我的标题包含缩放和拖动两个关键字。如果你不知道答案，那好吧。看我不想要代码，我想要 Cyril 为我做的整体方法。

标签： javascript jquery d3.js svg

【解决方案1】：

查看您发布的图表，没有直接的 d3 laout 以这种螺旋方式排列节点。但是，如果您知道需要放置节点的位置，则可以进行强制布局。

是的，您可以拖动可用的节点，链接将相应更新。附加一个小提琴，您可以即兴创作并将图像添加到节点。节点的数据应该是这样的：

"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。

【讨论】：