D3 .JS-CSDN博客

本文介绍了一种使用jQuery和D3.js实现SVG元素拖动的方法。通过监听mousedown、mousemove及mouseup事件，使得SVG中的元素可以被鼠标拖动，并实时更新其位置。此技术适用于需要交互式图表或地图的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://github.com/mbostock/d3/wiki/API-Reference

拖动

jQuery(document).ready(function () {
  $('svg').mousedown(
   function (event) {
    var isMove = true;
    //var translate = $("#pic").attr("transform");
    //var translateX = ;
    var xforms = $("#pic").attr('transform');
    var parts = /[0-9.-]*\,[0-9.-]*/.exec(xforms);
    var firstX = 0;
     firstY = 0;
    if(parts != null){
     var partArray = parts[0].split(",");
        firstX = Number(partArray[0]) || 0;
     firstY = Number(partArray[1]) || 0;
    }
    var abs_x = event.pageX - firstX;
    var abs_y = event.pageY - firstY;
    $(document).mousemove(function (event) {
      d3.select("svg").style("cursor", "move");
      if (isMove) {
       var obj = $('#pic');
       obj.attr("transform", function(){
        var left = event.pageX - abs_x;
        var top = event.pageY - abs_y;
        return "translate(" + left + "," + top + ")";

       });

      }
     }
    ).mouseup(
     function () {
      d3.select("svg").style("cursor", "pointer");
      isMove = false;
     }

    );
   }
  );

    });