d3中元素拖拽drag实例

参考链接：http://blog.csdn.net/lzhlzz/article/details/42200579https://github.com/d3/d3-3.x-api-reference/blob/master/Drag-Behavior.md使用拖拽功能我们可以快速将图标展示成我们需要的样子。d3.behavior.drag()用来构造一个拖拽行为。如果让元素响应这个行为需要使用c

justforuse

15461人浏览 · 2016-07-25 14:29:38

justforuse · 2016-07-25 14:29:38 发布

参考链接：http://blog.csdn.net/lzhlzz/article/details/42200579
https://github.com/d3/d3-3.x-api-reference/blob/master/Drag-Behavior.md

使用拖拽功能我们可以快速将图标展示成我们需要的样子。

d3.behavior.drag()用来构造一个拖拽行为。如果让元素响应这个行为需要使用call()函数，例如selection.call(drag) 。

使用drag.on()函数来监听一个事件，函数语法为drag.on(type [, listener]) type表示时间类型，除了drag 还有 dragstart 和dragend 。

drag.origin()定义拖拽的原点，默认原点为鼠标点击的位置，这也会造成元素跳动。指定的原点访问器必须返回一个包含被拖动元素开始坐标x和y的对象；

下面就是一个拖拽元素的实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="../d3.v3.js"></script>
</head>

<body>
    <script>
    var width = "100%",
        height = 300;

    var circles = [{
        cx: 150,
        cy: 200,
        r: 40
    }, {
        cx: 250,
        cy: 200,
        r: 40
    }];
    //添加画布并设置画布大小
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)

    var drag = d3.behavior.drag()
        //定义了元素拖拽行为的原点，设置为圆的圆心位置可以避免明显的元素跳动,第一个参考连接中的例子可以看到明显的跳动
        .origin(function() {
            var t = d3.select(this);
            return {
                x: t.attr("cx"),
                y: t.attr("cy")
            };
        })
        .on("drag", dragmove);

    svg.selectAll("circle")
        .data(circles)
        .enter()
        .append("circle")
        .attr("cx", function(d, i) {
            return d.cx;
        })
        .attr("cy", function(d, i) {
            return d.cy;
        })
        .attr("r", function(d, i) {
            return d.r;
        })
        .attr("fill", "lime")
        .attr("stroke", "white")
        //为元素添加拖拽事件
        .call(drag);

    //定义拖拽行为，此处为重新设置元素圆心位置
    function dragmove(d) {
        d3.select(this)
            .attr("cx", function() {
                return d.cx = d3.event.x
            })
            .attr("cy", d.cy = d3.event.y)
    }
    </script>
</body>

</html>

演示地址：http://justforuse.cn/d3/d3.drag/

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..