如何让线条或路径在形状移动时跟随形状

Question

我想在鼠标移动形状时生成事件。 SVG形状将沿着路径或线移动，但我不知道该怎么做。 这里是我的代码： JSbin

编辑

我有两个形状，然后我可以建立两个形状之间的线。当我试图拖动我想要按照线的形状可以增加或减少。现在我可以在我的code中的两个形状之间建立一条线，但我不知道何时拖动一条线可以增加或缩短线的长度

Answer 1

您可以使用d3执行此操作，但需要定义数据喜欢这个：

然后使用强制布局来放置节点。 链接和节点将由滴答功能关注。

graph = { 
      "nodes": [{ 
      "x": 469,//x position of the node 
      "y": 410, //y position of the node 
      fixed: true//this is a fixed node 
      }, { 
      "x": 493, 
      "y": 364, 
      fixed: true 
      }, { 
      "x": 442, 
      "y": 365, 
      fixed: true 
      }, { 
      "x": 467, 
      "y": 314, 
      fixed: true 
      }, ], 
      "links": [{//link between nodes index 0 and index 1 
      "source": 0,//this link node @ index 0 
      "target": 1//this link node @ index 1 
      }, { 
      "source": 1, 
      "target": 2 
      }, { 
      "source": 2, 
      "target": 0 
      }, { 
      "source": 1, 
      "target": 3 
      }, { 
      "source": 3, 
      "target": 2 
      }, ] 
     } 

对于更多的圆圈添加节点到上面的图形对象，并相应地更新链接。

完整的工作代码在这里

var width = 960, 
 
     height = 500; 
 

 
    var force = d3.layout.force() 
 
     .size([width, height]) 
 
     .charge(-400) 
 
     .linkDistance(40) 
 
     .on("tick", tick); 
 
    //making the drag listener 
 
    var drag = force.drag() 
 
     .on("dragstart", dragstart).on("dragend", dragend); 
 
    //making svg 
 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height); 
 
    // build the arrow. 
 
    svg.append("svg:defs").selectAll("marker") 
 
     .data(["end"]) // Different link/path types can be defined here 
 
     .enter().append("svg:marker") // This section adds in the arrows 
 
     .attr("id", String) 
 
     .attr("viewBox", "0 -5 10 10") 
 
     .attr("refX", 25) 
 
     .attr("refY", -1.5) 
 
     .attr("markerWidth", 6) 
 
     .attr("markerHeight", 6) 
 
     .attr("orient", "auto") 
 
     .append("svg:path") 
 
     .attr("d", "M0,-5L10,0L0,5"); 
 
    
 
    var link = svg.selectAll(".link"), 
 
     node = svg.selectAll(".node"); 
 
    //data on nodes 
 
    graph = { 
 
     "nodes": [{ 
 
     "x": 469, 
 
     "y": 410, 
 
     fixed: true//this is a fixed node 
 
     }, { 
 
     "x": 493, 
 
     "y": 364, 
 
     fixed: true 
 
     }, { 
 
     "x": 442, 
 
     "y": 365, 
 
     fixed: true 
 
     }, { 
 
     "x": 467, 
 
     "y": 314, 
 
     fixed: true 
 
     }, ], 
 
     "links": [{//link between nodes 
 
     "source": 0, 
 
     "target": 1 
 
     }, { 
 
     "source": 1, 
 
     "target": 2 
 
     }, { 
 
     "source": 2, 
 
     "target": 0 
 
     }, { 
 
     "source": 1, 
 
     "target": 3 
 
     }, { 
 
     "source": 3, 
 
     "target": 2 
 
     }, ] 
 
    } 
 
    //using forcelayout 
 
    force 
 
     .nodes(graph.nodes) 
 
     .links(graph.links) 
 
     .start(); 
 
    //making lines 
 
    link = link.data(graph.links) 
 
     .enter().append("line") 
 
     .attr("class", "link").attr("marker-end", "url(#end)"); 
 
    //making nodes 
 
    node = node.data(graph.nodes) 
 
     .enter().append("circle") 
 
     .attr("class", "node") 
 
     .attr("r", 12) 
 

 
    .call(drag); 
 

 

 

 
    function tick() { 
 
     link.attr("x1", function(d) { 
 
      return d.source.x; 
 
     }) 
 
     .attr("y1", function(d) { 
 
      return d.source.y; 
 
     }) 
 
     .attr("x2", function(d) { 
 
      return d.target.x; 
 
     }) 
 
     .attr("y2", function(d) { 
 
      return d.target.y; 
 
     }); 
 

 
     node.attr("cx", function(d) { 
 
      return d.x; 
 
     }) 
 
     .attr("cy", function(d) { 
 
      return d.y; 
 
     }); 
 
    } 
 

 

 
    function dragstart(d) { 
 
     d3.select(this).classed("fixed", true); 
 
    } 
 

 
    function dragend(d) { 
 
     d3.select(this).classed("fixed", false); 
 
    }

.link { 
 
    stroke: #000; 
 
    stroke-width: 1.5px; 
 
    } 
 
    
 
    .node { 
 
    cursor: move; 
 
    fill: #ccc; 
 
    stroke: #000; 
 
    stroke-width: 1.5px; 
 
    } 
 
    
 
    .node.fixed { 
 
    fill: #f00; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

普拉克是here

希望这有助于！