Блог

Главная - Вопросы по программированию - d3 перетаскиваемый сегмент строки svg-пути

d3 перетаскиваемый сегмент строки svg-пути

#javascript #svg #d3.js

#javascript #svg #d3.js

Вопрос:

У меня есть задача рисовать фигуры svg при наведении курсора мыши с помощью d3. Я пытался выяснить, как сделать их перетаскиваемыми. Я отключил строку svg (см. Здесь ), но на самом деле мне нужно использовать пути вместо этого. Я подобрался довольно близко, но я в тупике. Может кто-нибудь, пожалуйста, помочь мне? Вот часть кода, и это моя скрипка.

 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));    
}

наведение курсора мыши

 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);

перемещение мыши

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

Ответ №1:

Ну, я был очень близок. Это то, что я изменил в dragmove. Теперь он работает хорошо.

 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)} ];

Ответ №2:

Вот путь, который вы можете перетащить. Это то же самое, что перетаскивать другие типы элементов svg.

 <head>
  <script data-require="d3@*" data-semver="3.4.6" src="//cdnjs.cloudflare.com/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) amp;amp; x <= (w - 5)) amp;amp; (y >= (0   5) amp;amp; y <= (h - 5));
      }
    }
  </script>
</body>

</html>

Комментарии:

1. это не будет работать, например, для var data = [{«x»: 50, «y»: 50}, {«x»: 100, «y»: 100}];