Question

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

修改

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

Answer 1

你可以使用d3这样做，但你需要定义你的数据：

然后使用强制布局放置节点。链接和节点将由tick函数处理。

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>

Plunk是here

希望这有帮助！

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

1 个答案: