d3.drag使用指南

创建一个可拖动的圆展示d3.drag的使用

首先创建svg容器和一个circle元素：

const width = window.innerWidth
const height = window.innerHeightconst svg = d3.select('body').append('svg').attr('width', width).attr('height', height).append('g').attr('transform', `translate(${ width / 2 }, ${ height / 2 })`)const circle = svg.append('circle').attr('r', 40).attr('fill', 'red')

监听拖动事件需要先使用d3.drag模块创建一个拖动事件，然后绑定到特定的元素上。

const drag = d3.drag()
// 调用 call是手动调用函数并将选择集作为第一个参数
selection.call(drag)
// 或者
drag( selection )

一次拖动事件你可以定义三个阶段的监听函数：

d3.drag().on('start', dragStart) // 拖动开始，触发一次.on('drag', draged) // 拖动中，触发多次.on('end', dragEnd) // 拖动结束，触发一次

我们通过draged函数设置circle元素的cx,cy属性实现拖动：

const drag = d3.drag().on('start', () => {}).on('end', () => {}).on('drag', draged)circle.call(drag) // 绑定function draged() {const {x,y} = d3.eventd3.select(this).attr('cx', x).attr('cy', y)
}

鼠标位置通过d3.event对象访问到，完整的d3.event属性：

{"type": "drag", // 分别是三个阶段对应的 start drag end"subject": { "x":12.5, "y":-11.5 },"identifier": "mouse","active": 1, // start,end为0  drag阶段为1"x": -30.5, // 鼠标位置"y": -42.5,"dx": -6, // 相对于上次drag的x,y坐标变化"dy": -6,"sourceEvent": MouseEvent(...) // 浏览器原生事件
}

鼠标位置x,y的相对元素可以通过drag.container修改，默认是事件源的父元素：

drag.container(function container() {return this.parentNode
})

而d3.event.subject则表示拖拽的主体，默认是事件源上绑定的数据，否则为start阶段的x,y坐标，它的作用是利用它在拖动期间访问主体和指针的相对位置，所以它应该是不可变的。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script src="https://d3js.org/d3.v5.min.js"></script><script>const width = window.innerWidthconst height = window.innerHeightconst svg = d3.select('body').append('svg').attr('width', width).attr('height', height).append('g').attr('transform', `translate(${ width / 2 }, ${ height / 2 })`)svg.attr('stroke', 'red')const circle = svg.append('circle').attr('r', 40).attr('fill', 'red').call(d3.drag().on('start', () => {}).on('end', () => {}).on('drag', draged))function draged() {const {x,y} = d3.eventd3.select(this).attr('cx', x).attr('cy', y)}</script>
</body>
</html>

d3.drag使用指南相关推荐

d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
D3、EChart、HighChart绘图demol
1.echarts: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
[知识图谱实战篇] 七.HTML+D3实现关系图谱搜索功能
前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术.Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例.为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏 ...
[知识图谱实战篇] 六.HTML+D3实现点击节点显示相关属性及属性值
前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术.Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例.为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏 ...
d3代码如何改造成update结构（恰当处理enter和exit）
d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...
svg操纵方案基于 D3 还是 angular？
之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...
D3.js in action 笔记
因为本书是英文版的,没有中文版,所以基本上这个笔记是为了代码留用,加之其代码格式和内容都比较简洁,然后又提出了很多问题,值得学习. 其中代码的位置:https://github.com/emeeks/ ...
react 数据可视化_使用d3创建数据可视化并在2020年做出React
react 数据可视化 Data visualisation and application technologies have evolved greatly over the past decad ...
知识图谱可视化vue.js + d3.js
Github 前端 vue.js + d3.js. 需求上部区域展示所有的概念类别.以及画布内他们的个数展示所有关系类别,以及画布内他们的个数显示所有的概念场景(scenes 字段).关系场景 ...

d3.drag使用指南

d3.drag使用指南相关推荐

最新文章

热门文章