首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

D3在拖动圆时获取下方多边形的id

D3是一种基于JavaScript的数据可视化库,用于创建交互式和动态的数据图表。它提供了丰富的功能和灵活的API,使开发人员能够轻松地操作数据并将其可视化。

在D3中,要实现拖动圆并获取下方多边形的id,可以按照以下步骤进行操作:

  1. 创建SVG画布:使用D3的select函数选择一个DOM元素,然后使用append函数添加一个SVG元素作为画布。
  2. 创建多边形和圆:使用D3的append函数添加多边形和圆形元素到SVG画布上。可以使用polygon元素表示多边形,使用circle元素表示圆。
  3. 实现拖动:使用D3的drag函数创建一个拖动行为,并将其应用到圆形元素上。可以使用on函数监听拖动事件,例如dragstartdragdragend
  4. 获取下方多边形的id:在拖动事件的回调函数中,可以通过D3的select函数选择下方的多边形元素,并使用attr函数获取其id属性的值。

以下是一个示例代码:

代码语言:txt
复制
// 创建SVG画布
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建多边形
svg.append("polygon")
  .attr("points", "100,100 200,50 300,100")
  .attr("id", "polygon1");

// 创建圆形
svg.append("circle")
  .attr("cx", 200)
  .attr("cy", 200)
  .attr("r", 50)
  .attr("id", "circle1")
  .call(d3.drag()
    .on("start", dragStart)
    .on("drag", dragging)
    .on("end", dragEnd));

// 拖动开始事件
function dragStart() {
  // 拖动开始时的操作
}

// 拖动事件
function dragging() {
  // 拖动时的操作
}

// 拖动结束事件
function dragEnd() {
  // 拖动结束时的操作
  var polygonId = d3.select("#polygon1").attr("id");
  console.log("下方多边形的id为:" + polygonId);
}

在这个示例中,我们创建了一个SVG画布,并在画布上添加了一个多边形和一个圆形。通过使用D3的drag函数,我们实现了圆形的拖动功能,并在拖动结束时获取了下方多边形的id。

对于这个问题,腾讯云没有特定的产品或服务与之直接相关。但是,腾讯云提供了丰富的云计算服务,如云服务器、云数据库、云存储等,可以帮助开发人员构建和部署各种应用。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

初中数学课程与信息技术整合

此时上有一点A;将鼠标移到上,会变色,此时单击则会生成点B;按下左键向X轴拖动,当已经画出(但尚未画完)线接近垂直于x轴,x轴即会变色,附近会出现“垂足”字样。...这时用手中鼠标屏幕上作几何图形,有用粉笔黑板上画图感觉;而且所作出图形,有些点、线或是可以拖动拖动,图形变了,但图中几何关系不变。...如图2-92,作多边形ABCDEFGHIJKLMNP,并摆成一个牛头形状,接着利用PointOnPolygon函数作出多边形上点Q;拖动Q,就会发现Q多边形上运动;然后平面上任作点R,连接QR,并在...图2-98 拖动过程中,动态几何作图能够保持所有给定几何关系,因为它就是根据几何关系来设计!那么,你思考一下,上述方法画圆,到底给定了什么样几何关系?...显然这个函数是不能直接作出多边形,只能分步作出多边形各个顶点。 既然有内接正多边形,那肯定存在外切正多边形

1.3K10

让你成为灵魂画手 JS 引擎:Zdog

本文作者:HelloGitHub-kalifun 文中涉及示例代码,已同步更新到 HelloGitHub-Team 仓库 点击本文最下方“阅读原文”即可获取 今天给大家推荐一个使用 JavaScript...圆形、扁平、设计师友好用于 canvas 和 SVG 伪 3D 引擎。 使用 Zdog 您可以 Web 上设计和渲染简单 3D 模型。Zdog 是一个伪 3D 引擎。...图形圆滑:所有的圆形都呈现为边,没有多边形锯齿。 使用友好:使用 API 完成建模。 二、方法介绍 解释说明均在代码中以注释方式展示,请大家注意阅读。...}); // 更新所有显示属性并渲染到illo画布上 illo2.updateRenderGraph(); 2.4 拖动旋转 通过插图上设置 dragRotate:true...来拖动来启用旋转。

1.9K40
  • AutoCAD工程制图 常见命令与注意事项全总结(120例)

    23.命令(C),默认输入半径,可以点击右下角输入直径,只能标注直径不能标注半径。 24.绘图以定位线为标准画圆。技巧,剪断链接部分后点击删除 25.内功能,切点切点半径。...33.椭圆命令:EL 34.中心点画椭圆(点击面板上椭圆按钮,只需输入长,短轴一半,要先指定中心点位置) 35.顶点画椭圆(输入el,确定顶点(也可以在下方面板点击中心点绘制),再输入长轴长,短轴一半...39.多边形命令:POL 40.看标注:点到点(内接多边形),边到边(外切多边形)。 41.利用命令绘制多边形,无需指定中心点(必须顺时针点端点)。...67.分解(X) 68.延申(EX)也可以选定直接两头拖动。 69.面域及布尔运算应用。 70.BO:将生成选中封闭部分生成多段线。并可以拖动复制下来。...(原来属于其他图层线可以选中后选择想要图层,会自动切换成该图层应用格式。 82.锁定某一图层可以删除防止被删除。也同样无法被修改。

    1.3K10

    Python学习总结(1)—turtle海龟作图

    ,缺省会拟合为 dot(size=None, *color) 画点 海龟所处位置画点 size是点大小,为整型;缺省为默认值 *color是点颜色英文单词,为字符串类型 stamp(...) 印章 海龟当前位置绘制一个海龟形状【需要提前设置海龟形状,缺省为箭头形状】,并返回该印章id【需要print(t.stamp())或及时赋值给其他变量stamp_id=t.stamp()】...ondrag(fun, btn=1, add=None) 当鼠标拖动 将 fun 指定函数绑定到在此海龟上移动鼠标事件。...如果 fun 值为 None,则移除现有的绑定 注: 海龟上移动鼠标事件之前应先发生在此海龟上点击鼠标事件 _ turtle.ondrag(turtle.goto)在此之后点击并拖动海龟可在屏幕上手绘线条...它将连线到第一个顶点 get_poly() 获取多边形 返回最新记录多边形。 clone() 克隆海龟 创建并返回海龟克隆体,具有相同位置、朝向和海龟属性。

    1.6K10

    网页CAD二次开发实现多边形详细教程

    项目中添加命令行,实现功能动态交互功能,具体操作请参考[mxcad |命令行]。...基于mxcad库实现多边形功能多边形功能是根据用户输入边数将目标转变成正多边形,其中转变方式分两种情况,一种是转换后多边形内接于目标,一种是转换后多边形外切于。...内接于:即目标多边形外接,它与多边形每个顶点都相接。因此我们可以通过目标上均匀取点找到多边形所有顶点,最后通过多段线闭合连接成多边形,如下图:2....外切于:即目标多边形内切圆,它与多边形每条边都相切,且与多边形中心同一直线上。因此我们可以通过获取多边形外切圆反向绘制多边形。...根据多边形条数求得多边形每个内角度数,再根据目标半径值可求多边形外切圆半径值:目标半径 / sin(90 - (360 / (num * 2))),如下图所示:使用 mxcad 库实现完整多边形功能

    15710

    CAD常用基本操作

    ,通过平移获取另一边直线 B 中绘制相应长度弦,现在圆心处绘制相同长度直线,再通过平移获得 22 自定义工具栏命令 CUI或输入Toolbar 其中命令特性宏中^C^表示取消正在执行操作 22...1 直线命令:line(L) A绝对坐标法:直接输入点坐标 B相对坐标法:@ X,Y(其中@表示相对于上一点位置不变,绘制同心也可输入@控制圆心不变) C 角度直线(极轴法):第一点:X,Y;第二点...上下方向键命令 (圆心和半径自动记录功能)有缘学习更多+谓ygd3076考证资料或关注桃报:奉献教育(店铺) b 特殊角度切线画法可采用先绘水平切线再绕圆心同时旋转和切线方法 c 绘制与两相切且圆心一直线上...13 正多边形命令:polgon(POL) A 正多边形默认可选择变数为3~1024,1024以上默认为 B 边(E):通过指定一条边长度绘制正多边形 C 多边形绘制中默认边与x轴平行,要进行改变使多边形尖角向上...mline(ML) A 用于绘制多条平行线 B 对正(J)a 上:光标下方绘制多线,指定点处将会出现具有最大正偏移值直线 b 无:将光标作为原点绘制多线 c 下:光标上方绘制多线,指定点处将出现具有最大负偏移值直线

    5.5K50

    【愚公系列】2022年04月 微信小程序-地图使用之API相关函数案例

    多边形 2.3.0 subkey string 否 个性化地图使用key 2.3.0 layer-style number 1 否 个性化地图配置 style,不支持动态修改 rotate...否 地图渲染更新完成触发 1.6.0 bindregionchange eventhandle 否 视野发生变化时触发, 2.3.0 bindpoitap eventhandle 否 点击地图...= {longitude, latitude} 2.13.0 circle 地图上显示 属性 说明 类型 必填 备注 latitude 纬度 number 是 浮点数,范围 -90 ~ 90...即将废弃,请使用 cover-view 属性 说明 类型 必填 备注 id 控件id number 否 控件点击事件回调会返回此id position 控件地图位置 object 是 控件相对地图位置...导致视野变化原因 string 拖动地图导致(drag)、缩放导致(scale)、调用接口导致(update) 一、API相关函数案例 1.wxml <view class="page-body"

    81450

    CAD2007操作教程上

    对象捕捉F3:绘制图形可随时捕捉己绘图形上关键点。 右击,单击设置,在对象捕捉选项卡中勾选捕捉点类型。 对象追踪F11:配合对象捕捉使用,鼠标指针下方显示捕捉点提示(长度,角度)。...第四课 绘图命令----点、距形、正多边形 本课重点与难点: l 点绘制样式及点作用。 l 创建矩形几种方法。 l 创建正多边形步骤。 一、点命令(PO):绘图中起辅助作用。...,命令栏中输入边数,指定正多边形中心,输入i确定,再输入半径长度 注:“内接于”表示绘制多边形将内接于假想。...绘制外切正多形方法:先在命令栏中输入快捷键为POL,命令栏中输入边数,指定正多边形中心,输入C确定,现输入半径长度 注:“外切于”表示绘制多边形将外切于假想。...“拖放单位”下拉列表框:用于设置从设计中心拖动缩放单位。 6“说明”文本框:用于输入当前块说明部分。

    3.6K30

    Autodesk CAD2022 入门命令总汇(附软件下载及安装教程)

    下面是我整理一些简单常用命令,方便以后查阅: 先贴一下软件下载及安装激活网盘链接吧:百度网盘 提取码:w3h5  CAD 2022 常用命令: 按住鼠标左键是 套索:从左往右框,需要框住全部才会选中...;从右往左框一点就能选中 点击鼠标左键拖动是 框选 空格 确定 F8 正交 m 移动 move 复制 copy co 复制 D 位移 M 多个 A 阵列 拉伸 STRETCH S 拉伸:> 选中多个 >...圆弧 ARC arc 圆弧 默认(三点画圆弧) arc + e + r 一条线上画圆弧(起点,端点,半径) 圆弧是逆时针旋转 多段线 PLINE PL 多段线 可以规定宽度 w 宽度:输入起点 >...多段线可以花圆弧 A 切换到圆弧 R 半径 D / 按住 Ctrl 切换方向 多线个段闭合(组合)为多段线 PE > 空格 > m > 空格 > 选中多条线 > 空格 > 输入 Y > 选择 闭合 > 空格 多边形...POLYGON POL 多边形:输入边数 > 指定中心点 > 输入半径 I 内接于 C 外切于 圆角 FILLET F 圆角:> 选择第一个对象(或 R 等等) > 选择第二个对象 R 半径:R

    1.7K30

    (html端编辑DWG)网页CAD中如何二开测量、测量面积功能

    测量面积功能(多边形、矩形)以多边形每一个顶点来确定多边形形状和位置,通过点击矩形量角点来确定矩形大小和位置,也可以自定义标注文字位置。...其中 mxcad 中对象对应实体类为 McDbCircle,该类提供了获取或设置相关信息属性或方法,我们可以根据功能需求去选择调用。...测量功能中需要获取对象半径、面积与周长,因此调用McDbCircle.radius属性获取半径McDbCircle.getArea()方法或直接计算来获取圆面积,以及McDbCircle.getLength...entId.id) return;// 获取相关信息const circle = entId.getMcDbEntity() as McDbCircle;const mCircle = new McDbTestMeasuringCircle...测量面积(多边形、矩形)功能中,调用McDbPolyline.getLength()方法获取多段线对象长度、以及多段线闭合情况下调用McDbPolyline.getArea()方法获取面积。

    8610

    原 基于 HTML5 Canvas 简易

    主要操作:点击工具条任意一个图标,工具条下空白处拖动鼠标,即可实现绘图。...,我们将之前注册好矢量图传给这个结合体中“图片”,然后通过控制这个图片“渲染颜色”,来过滤工具条选中和非选中状态颜色: function createItem(id, iconName, toolTip..., interactorsArr){ var item = { id: id,//工具条元素唯一标示,如果设置可通过getItemById获取 unfocusable...‘circle’ 被选中 this.node.s({//设置 style 样式 "shape": "oval",//椭圆形,为空显示为图片,可设置多边形类型参见入门手册..."shape.border.color": "#979797",//多边形类型图元边框颜色 "shape3d": "sphere"//为空显示为六面立方体

    1.1K40

    TryShape 背后故事,CSS 剪辑路径属性展示

    clip-path元素上应用该属性来创建形状,我们必须考虑 x 轴、y 轴和(0,0)元素左上角初始坐标。 这是一个div带有 x 轴、y 轴和初始坐标的元素(0,0)。...现在,只有这个圆形区域被裁剪并显示元素上。元素其余部分被隐藏以创建圆形印象。 中心位于 (70, 70) 坐标处,并裁剪了 70px x 70px 区域。因此显示了完整圆圈。...接下来,如果我们想指定在 位置(0,0)怎么办?在这种情况下,中心(0,0)位于半径为 70px位置。这使得元素内仅可见一部分。...下图显示了创建多边形每个顶点位置。我们可以指定任意数量顶点。 polygon() 函数允许我们使用传递给它一组顶点来创建多边形形状。 接下来,让我们看看ellipse()和url()值。...React 应用程序中可拖动

    2K30

    基于 HTML5 Canvas 简易 2D 3D 编辑器

    主要操作:点击工具条任意一个图标,工具条下空白处拖动鼠标,即可实现绘图。...,我们将之前注册好矢量图传给这个结合体中“图片”,然后通过控制这个图片“渲染颜色”,来过滤工具条选中和非选中状态颜色: function createItem(id, iconName, toolTip..., interactorsArr){ var item = { id: id,//工具条元素唯一标示,如果设置可通过getItemById获取 unfocusable...‘circle’ 被选中 this.node.s({//设置 style 样式 "shape": "oval",//椭圆形,为空显示为图片,可设置多边形类型参见入门手册..."shape.border.color": "#979797",//多边形类型图元边框颜色 "shape3d": "sphere"//为空显示为六面立方体

    2.2K70

    OpenLayers入门(一)

    ,所以设置该参数为true来让每次缩放结束后自动缩放到距离最近一个整数级别,这个必须要设置,当缩放在非整数级别地图会糊 }), target: this....({ layers: [vector] }) map.addInteraction(translate) // 可以监听一下拖动开始和结束事件,拖动经纬度可以从e里面获取 translate.on...Circle,绘制出来: 接下来看看正方形和长方形,在上面的例子之上修改: import { createRegularPolygon, createBox } from 'ol/interaction...({ source }) map.addInteraction(modify) 现在就可以拖动多边形端点来进行修改了。...获取地图当前区域范围 为了性能考虑,如果是地图上显示要素的话最好是只显示当前显示区域内要素,要显示数据一般从后端进行请求,那么可以把当前区域范围发送给后端,后端只返回这个区域内数据就好了,那么就需要获取当前范围

    4.9K40

    你不知道 Chrome DevTools 玩法

    Store As Global 当我们从控制台获取一些数据却没有变量名开发特别常见),可以通过右键点击数据旁小三角形,通过其来储存为全局变量,变量名为 temp1 一直延续下去,就可以配合 copy...getEventListeners 可以方便获取元素绑定事件,特别是配合 $ 使用,不过获取事件功能也可以 Element 中查看,主要是当元素嵌套层级深且复杂,可以不用点击而通过选择器来查看元素...第二行可以选择不同动画组,此时下方面板将会更新为当前动画组动画时间线。 中间拥有时间线区域,可以理解为动画进度条,可以通过拖动来跳转到动画对应时间点。...下方区域里,可以修改选定动画。 使用动画组捕捉动画后,我们可以进行慢速播放,重播动画。...可以拖动动画实心,也就是其关键帧,来控制动画持续时间(最左和最右两个实心)。也可以拖动中间实心来控制运动曲线,可以通过调试来获得最想要效果。

    93430

    你不知道 Chrome DevTools 玩法

    Store As Global 当我们从控制台获取一些数据却没有变量名开发特别常见),可以通过右键点击数据旁小三角形,通过其来储存为全局变量,变量名为 temp1 一直延续下去,就可以配合 copy...getEventListeners 可以方便获取元素绑定事件,特别是配合 $ 使用,不过获取事件功能也可以 Element 中查看,主要是当元素嵌套层级深且复杂,可以不用点击而通过选择器来查看元素...第二行可以选择不同动画组,此时下方面板将会更新为当前动画组动画时间线。 中间拥有时间线区域,可以理解为动画进度条,可以通过拖动来跳转到动画对应时间点。...下方区域里,可以修改选定动画。 使用动画组捕捉动画后,我们可以进行慢速播放,重播动画。...可以拖动动画实心,也就是其关键帧,来控制动画持续时间(最左和最右两个实心)。也可以拖动中间实心来控制运动曲线,可以通过调试来获得最想要效果。

    1.9K20

    【D3.js - v5.x】(3)Update & Enter & Exit | 交互 | 布局

    什么是 Update、Enter、Exit 假设, body 中有三个 p 元素,有一数组 [3, 6, 9],则可以将数组中每一项分别与一个 p 元素绑定在一起。...例如,拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。 用户用于交互工具一般有三种:鼠标、键盘、触屏。...SVG 中添加了一个,然后添加了一个监听器,是通过 on() 添加。... D3 中,每一个选择集都有 on() 函数,用于添加事件监听器。 on() 第一个参数是监听事件,第二个参数是监听到事件后响应内容,第二个参数是一个函数。...**D3 与其它很多可视化工具不同,相对来说较底层,对初学者来说不太方便,但是一旦掌握了,就比其他工具更加得心应手。 D3布局: D3 步骤相对来说较多。坏处是对初学者不方便、也不好理解。

    26710
    领券