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

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

const width = window.innerWidth
const height = window.innerHeight

const 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.event
    d3.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.innerWidth
        const height = window.innerHeight
        const 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.event
            d3.select(this)
                .attr('cx', x)
                .attr('cy', y)
        }
    </script>
</body>
</html>
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生