关于d3.js绘制的树中g元素的拖动的功能实现

最新推荐文章于 2025-03-13 00:57:17 发布

chobyn

最新推荐文章于 2025-03-13 00:57:17 发布

阅读量4k

点赞数 3

分类专栏： d3.js 文章标签： d3.js 树状图拖拽树的拖动 g元素的拖动

本文链接：https://blog.youkuaiyun.com/qq_34459872/article/details/79483913

版权

本文介绍了如何在d3.js绘制的树状图中实现g元素的拖动功能。作者在项目中遇到此需求，并参考了相关文章，详细解释了dragmove方法的实现，包括确定拖拽原点和根据鼠标位置改变树的位置。同时，提供了相关demo链接以帮助读者更好地理解和应用。

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

本人在做项目的时候，遇到了需要将d3.js绘制出来的树进行拖动的问题。

1.先贴创建该树的源码

//该树的结构
var treeData = [
  {
    name: "原问题",
    description: "",
    _prototype: "_question",
    children: []
  }
];

// ************** Generate the tree diagram  *****************
//定义树图的全局属性（宽高）
//

var margin = { top: 20, right: 120, bottom: 20, left: 120 },
  width = 4600 - margin.right - margin.left,
  height = 1400 - margin.top - margin.bottom;

var i = 0,
  duration = 750, //过渡延迟时间
  root;

var tree = d3.layout
  .tree() //创建一个树布局
  .size([height, width]);

var diagonal = d3.svg.diagonal().projection(function(d) {
  return [d.y, d.x];
}); //创建新的斜线生成器

//实例化树
root = treeData[0]; //treeData为上边定义的节点属性
root.x0 = height / 2;
root.y0 = 0;

var xx = root.x0; //树一开始的位置
var yy = root.y0;

//声明与定义画布属性
var svgger = d3.select("#mainTree").append("svg");
var svg = svgger
  .attr("id","the_svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom + 2000)
  .attr("xmlns", "http://www.w3.org/2000/svg")
  .append("g")
  .attr("transform", "translate(" + xx + "," + yy + ")");

2.渲染出来的结构如图，这是一个根节点