javascript - d3 draggable svg path line segment

I have the task of drawing svg shapes on mousedown using d3. I've been trying to figure out how to make them draggable. I got svg line down (see here) but I actually need to use paths instead. I've gotten pretty close but I'm stumped. Can someone please help me out? Here's some of the code and this is my fiddle.

var drag = d3.behavior.drag().on('drag', dragmove);
function dragmove() {
    isDown = false;
    m3 = d3.mouse(this);
    var newArray = [ {x: (m1[0] + d3.event.dx), y: (m1[1] + d3.event.dy)},
                     {x: (m2[0] + d3.event.dx), y: (m2[1] + d3.event.dy)} ]; 
    line.attr('d', lineFunction(newArray));    
}

mousedown

pathArray = [ {'x': m1[0], 'y': m1[1]}, {'x': m1[0], 'y': m1[1]} ];
    line = svg.append('path')
        .attr('d', lineFunction(pathArray))
        .attr({'stroke': 'purple', 'stroke-width': 5, 'fill': 'none'})
        .call(drag);

mousemove

m2 = d3.mouse(this);
    pathArray[1] = {'x': m2[0], 'y': m2[1]};
    line.attr('d', lineFunction(pathArray));

var drag = d3.behavior.drag().on('drag', dragmove);
function dragmove() {
    isDown = false;
    m3 = d3.mouse(this);
    var newArray = [ {x: (m1[0] + d3.event.dx), y: (m1[1] + d3.event.dy)},
                     {x: (m2[0] + d3.event.dx), y: (m2[1] + d3.event.dy)} ]; 
    line.attr('d', lineFunction(newArray));    
}

mousedown

pathArray = [ {'x': m1[0], 'y': m1[1]}, {'x': m1[0], 'y': m1[1]} ];
    line = svg.append('path')
        .attr('d', lineFunction(pathArray))
        .attr({'stroke': 'purple', 'stroke-width': 5, 'fill': 'none'})
        .call(drag);

mousemove

m2 = d3.mouse(this);
    pathArray[1] = {'x': m2[0], 'y': m2[1]};
    line.attr('d', lineFunction(pathArray));

Share asked Jun 23, 2014 at 21:57 cocoa 3,9217 gold badges31 silver badges57 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Well, I was super close. This is what I changed in dragmove. It works nicely now.

var newArray = [ {x: (m1[0] += d3.event.dx), y: (m1[1] += d3.event.dy)},
                 {x: (m2[0] += d3.event.dx), y: (m2[1] += d3.event.dy)} ];

Here is a path you can drag. It is the same as dragging other types of svg element.

<head>
  <script data-require="d3@*" data-semver="3.4.6" src="//cdnjs.cloudflare./ajax/libs/d3/3.4.6/d3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <h1>Draggable SVG Path</h1>

  <script>
    renderPath();

    function renderPath() {

      var data = [{
        "x": 1,
        "y": 5
      }, {
        "x": 20,
        "y": 20
      }];
      var w = 200;
      var h = 200;

      var drag = d3.behavior.drag() // <-A
      .on("drag", move);

      function move(d) {
        var x = d3.event.x,
          y = d3.event.y;

        if (inBoundaries(x, y))
          d3.select(this)
            .attr("transform", function(d) {
              return "translate(" + x + ", " + y + ")";
            });
      }

      // Line creation function configured to do simple linear transformation.
      var lineFunction = d3.svg.line()
        .x(function(d) {
          return d.x;
        })
        .y(function(d) {
          return d.y;
        })
        .interpolate("linear");

      //The SVG Container
      var svgContainer = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);

      //The line SVG Path we draw
      var lineGraph = svgContainer.append("path")
        .attr("d", lineFunction(data))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none")
        .call(drag);

      function inBoundaries(x, y) {
        return (x >= (0 + 5) && x <= (w - 5)) && (y >= (0 + 5) && y <= (h - 5));
      }
    }
  </script>
</body>

</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - d3 draggable svg path line segment - Stack Overflow

2 Answers 2