this代表的就是当前元素

    <p id = "test">click</p><script>// var para = document.getElementById("test")// para.onclick = function(){this.innerHTML = "Done"}d3.select("#test").on("click",function(){d3.select(this).text("Done")})</script>

拖拽

    <script>var circles = [{cx:150, cy:220, r:30},{cx:250, cy:200, r:30}]var svg = d3.select("body").append("svg").attr("width",300).attr("height",300)var drag = d3.behavior.drag().origin(function(d,i){return {x:d.cx ,y:d.cy}}).on("dragstart",(d)=>{console.log("拖拽开始")}).on("dragend",(d)=>{console.log("拖拽结束")}).on("drag",function(d){d3.select(this).attr("cx",d.cx = d3.event.x).attr("cy",d.cy = d3.event.y)})svg.selectAll("circle").data(circles).enter().append("circle").attr("cx",(d)=>d.cx).attr("cy",(d)=>d.cy).attr("r",(d)=>d.r).attr("fill","black").call(drag)</script>

缩放行为

    <script>var circles = [{cx:150, cy:220, r:30},{cx:250, cy:200, r:30}]var svg = d3.select("body").append("svg").attr("width",300).attr("height",300)var zoom = d3.behavior.zoom().scaleExtent([1,10]).on("zoom",function(d){d3.select(this).attr("transform","translate("+d3.event.translate+")"+"scale("+d3.event.scale + ")")})var g = svg.append("g").call(zoom);g.selectAll("circle").data(circles).enter().append("circle").attr("cx",(d)=>d.cx).attr("cy",(d)=>d.cy).attr('r',(d)=>d.r).attr('fill','black')</script>

D3 Handling Events相关推荐

React中文文档之Handling Events
Handling Events - 事件处理 React元素的事件处理同DOM元素的事件处理非常相似. 有一些语法不同: 1.React事件使用 'camelCase-驼峰式' 命名,而不是 'low ...
D3 Selections
https://github.com/d3/d3/blob/master/API.md#selections-d3-selection 1.Selecting Elements 方法描述 d3.se ...
d3 v5 api select
https://github.com/d3/d3/blob/master/API.md#selections-d3-selection Selecting Elements(选择元素) 描述英文 d ...
Faking Touch Events on iOS for Fun and Profit
[http://blog.lazerwalker.com/blog/2013/10/16/faking-touch-events-on-ios-for-fun-and-profit] Faking T ...
d3js selections深入理解
D3 selections选择DOM元素以便可以对这些dom元素做相应的操作,比如:更改其style,修改其属性,执行data-join操作,或者插入.删除相应elements 比如,如果给定5个ci ...
android的UI开发工程师指引
不管是MFC,还是linux,还是android,UI开发都是如下两大核心机制: 第一个是消息循环,第二个是界面组织结构. 围绕着这些,衍生出来的OpenGL,SurfaceView,SurfaceF ...
jQuery.click（）与onClick
本文翻译自:jQuery.click() vs onClick I have a huge jQuery application, and I'm using the below two method ...
login控件authenticate_Login.Authenticate 事件 (System.Web.UI.WebControls) | Microsoft Docs
验证用户的身份后出现.Occurs when a user is authenticated. public: event System::Web::UI::WebControls::Authenti ...
用Xlib库进行基本图形编程
用Xlib库进行基本图形编程用Xlib库进行基本图形编程目录 1.前言 2.X Window系统的客户服务器模式 3.GUI编程-同步化的编程模型 4.基本的Xlib概念 1.X ...

D3 Handling Events

拖拽

缩放行为

D3 Handling Events相关推荐

最新文章

热门文章