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

在每个节点都有多个标签的D3树中,我如何“知道”我正在单击的位置

在每个节点都有多个标签的D3树中,要“知道”正在单击的位置,可以通过以下步骤实现:

  1. 首先,为每个节点添加一个单击事件监听器。可以使用D3的on方法来为节点绑定事件监听器,例如:
代码语言:txt
复制
node.on("click", handleClick);
  1. 在单击事件处理函数handleClick中,可以通过D3提供的事件对象来获取单击事件的相关信息,包括单击的位置。可以使用d3.event来访问事件对象,例如:
代码语言:txt
复制
function handleClick() {
  var clickedNode = d3.select(this); // 获取被单击的节点
  var clickedPosition = d3.mouse(this); // 获取单击的位置,相对于当前节点的坐标系
  // 其他处理逻辑...
}
  1. 如果需要知道单击的位置在整个D3树中的坐标,可以通过将单击的位置转换为相对于根节点的坐标。可以使用D3的d3.selectd3.transform方法来实现坐标转换,例如:
代码语言:txt
复制
function handleClick() {
  var clickedNode = d3.select(this); // 获取被单击的节点
  var clickedPosition = d3.mouse(this); // 获取单击的位置,相对于当前节点的坐标系

  // 将单击的位置转换为相对于根节点的坐标
  var transform = d3.transform(clickedNode.attr("transform"));
  var rootPosition = [
    clickedPosition[0] + transform.translate[0],
    clickedPosition[1] + transform.translate[1]
  ];

  // 其他处理逻辑...
}

通过以上步骤,你可以在每个节点都有多个标签的D3树中“知道”你正在单击的位置,并进行相应的处理。请注意,以上代码示例中的node表示D3树中的节点,你需要根据实际情况进行相应的修改和适配。

相关搜索:如何在python中更改我的树视图位置?我正在显示mysql数据库如何设置我的设计,使每个3个控件显示在一行中,每个控件上方都有标签?在Hugo Base模板中,我如何知道正在显示的是哪个页面?在gem5中,我如何知道类的具体位置?在R中,我如何对我的系统树中的标签进行着色?(使用来自ape的BioNj )如何在java中获取xml中类似的唯一节点名的计数?在java中,我不知道我的节点名,我只提供XML作为输入。我如何让我的函数在树B中搜索,返回一个节点的索引,其中必须找到关键字?我想从数据库中显示多个图像到jsp (我正在映射servlet),所以在jsp中,m将显示在img标签的src中。在Cypher查询中,我可以使用什么技术来仅获取基于每个节点的多个关系属性的路径在PowerShell中创建包含多个子文件夹的目录?(我知道如何在Bash中实现)如何更改react-native-select-multiple中复选框的位置,我希望在标签之后如果我使用ObservableHQ v6而不是d3 v5,则在d3中找到的可折叠径向整齐树在单击鼠标后不会折叠我已经在一个模式中实现了一个视频标签。单击它,视频应该会播放。但是,在我的例子中,同样的视频正在播放如何防止我的设备在使用NavigationComponent和单个活动时读取每个片段中的近场通信标签?我正在尝试按行将一个大的csv拆分为单独的.txt文件,在R中的每个.txt中都有一个头。在C#中用readline从文本文件中读取时,如果我要读取的行的位置在我要读取的每个单独的文件中发生变化,我如何读取?在Wordpress中,我如何在每个帖子中获得紧跟在第一个h2标签之后的段落?在一个包含多个POM.xml文件的嵌套项目中,我如何知道哪个pom属于我当前在Intellij中的模块?如何在我的马卒去过的每个位置放置一个数字(在一个2D“板”数组中)如何使用加速度计在aframe vr中改变摄像头的位置/行走?(我知道它会不稳定,但我还是想试试)
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

原创 | 决策金融领域应用(附链接)

决策算法容易理解,适用各种数据,解决各种问题时都有良好表现,尤其是以模型为核心各种集成算法,各个行业和领域都有广泛应用。我们来简单了解一下决策如何工作。...最初问题所在地方叫做根节点得到结论前每一个问题都是中间节点,而得到每一个结论都叫做叶子节点。 决策算法核心是要解决两个问题: (1)如何从数据表找出最佳节点和最佳分枝?...不纯度基于节点来计算,每个节点都会有一个不纯度,并且子节点不纯度一定是低于父节点,也就是说,同一棵决策树上,叶子节点不纯度一定是最低。 构造就是生成一棵完整决策。...计算过程,我们会计算每个节点归一化信息熵,即按照每个节点在父节点中出现概率,来计算这些子节点信息熵。...(5)如果标签某些类占主导地位,决策学习者会创建偏向主导类。因此,建议拟合决策之前平衡数据集。 5.决策金融领域应用 比特币匿名性特征为非法活动发展提供了有利工具。

1.1K10

如何遍历DOM

DOM 是由节点构成,document 节点位于根,其他每个节点(包括元素,注释和文本节点)都作为各个分支节点。...本教程,我们回顾一些HTML术语,这对使用 JS 和DOM非常重要,我们会介绍一下DOM节点,以及如何识别最常见节点类型。最后,创建一个 JS 程序来交互式地修改DOM。...DOM由嵌套节点树结构组成,通常称为DOM。 我们知道祖先家谱,该谱系由父母,孩子和兄弟姐妹组成。 DOM节点也称为父级,子级和同级,具体取决于它们与其他节点关系。...识别节点类型 文档每个节点都有一个节点类型,可以通过nodeType属性访问该类型,更多节点类型大家可以到 MDN 上查看。下面是我们比较常见节点类型。...单击按钮,事件将触发。 总结 本文中,我们了解了DOM 是如何构造成节点节点通常是HTML元素、文本或注释,我们创建了一个脚本,允许用户修改网站,而不必手动开发人员控制台中输入代码。

9K30
  • D3使用教程】(6) 交互操作之事件监听

    事件监听 之前文章写到,为了让图表具有交互能力,我们必须针对一些事件来编写代码,以便监听某些DOM元素发生这些事件。 D3,on()方法对于绑定D3元素集非常方便。...通常情况下,我们会一次性为多个元素绑定事件监听器,所要改变只是将select()换成选择多个元素selectAll(),再把选择元素集交给on()即可。....on("mouseover",function(d){ d3.select(this) //传给任何D3方法匿名函数,如果想操作当前元素,只要引用this就行 .transition...为了不被标签影响,可以给标签(svg text元素)添加规则: svg text {pointer-event:none;} 或者D3创建标签时候设置CSS属性: svg.selectAll("text...这里需要注意是,单击条形图时,会触发一次过渡,而鼠标悬停又会触发另一次过渡。为了运行鼠标悬停高亮过渡,原来正在运行过渡就会中断。所以,为了避免中断,这里悬停我们使用了CSS3方式。

    33510

    图解机器学习(清晰路线图)

    确实,机器学习各种套路确实不少,但是如果掌握了正确路径和方法,其实还是有迹可循,这里推荐SASLi Hui这篇博客,讲述了如何选择机器学习各种方法。...KMeans算法有几个问题: 如何决定K值,在上图例子知道要分三个聚类,所以选择K等于3,然而在实际应用,往往并不知道应该分成几个类 由于中心点初始位置是随机,有可能并不能正确分类,大家可以...回归 线性回归 线性回归是最经典回归算法。 统计学,线性回归(Linear regression)是利用称为线性回归方程最小二乘函数对一个或多个自变量和因变量之间关系进行建模一种回归分析。...其每个非叶节点表示一个特征属性上测试,每个分支代表这个特征属性某个值域上输出,而每个节点存放一个类别。...使用决策进行决策过程就是从根节点开始,测试待分类项相应特征属性,并按照其值选择输出分支,直到到达叶子节点,将叶子节点存放类别作为决策结果。

    1.3K90

    精通Excel数组公式005:比较数组运算及使用一个或多个条件聚合计算

    如下图1所示,单元格区域A3:B8记录了城市名和对应时间,想要知道每个城市对应最小时间。...我们知道,可以使用MIN函数来求一组数值最小值,但是如何分离出每个城市并分别求出它们对应时间最小值呢? ?...公式: A3:A8=D3 将单元格区域A3:A8城市名与单元格D3城市名相比较,生成数组: {FALSE;FALSE;TRUE;FALSE;FALSE;TRUE} 接着,IF函数根据比较结果...“输入引用列单元格”输入D3单击“确定”按钮。 使用数据透视表 可以使用数据透视表来获得上文示例结果,如下图6所示。 ? 图6 创建数据透视表步骤如下: 1....“创建数据透视表”对话框“选择放置数据透视表位置”中选取“现有工作表”,输入:D1,单击“确定”。 3. 将“城市”字段拖至行区域,将“时间(h)”字段拖至值区域。 4.

    8.2K40

    数据结构思维 第六章 遍历

    图 6.1 简单 HTML 页面的 DOM 每个节点包含其子节点链接; 此外,每个节点都包含其父节点链接,所以任何节点都可以向上或向下浏览。实际页面的 DOM 通常比这个例子更复杂。...大多数网络浏览器提供了工具,用于检查你正在查看页面的 DOM。 Chrome ,你可以右键单击网页任何部分,然后从弹出菜单中选择Inspect(检查)。...,它是并发,基于类,面向对象,[13] 和特地设计… 6.5 深度优先搜索 有几种方式可以合理地遍历一个每个都有不同应用。...如果Node有任何子节点,它会按顺序每一个子节点上调用recursiveDFS。 在这个例子,我们遍历子节点之前打印每个TextNode内容,所以这是一个“前序”遍历例子。...作为替代,我们可以使用栈数据结构自己跟踪节点;如果我们这样做,我们可以避免递归并迭代遍历。 6.6 Java 解释 DFS 迭代版本之前,将解释栈数据结构。

    83120

    | TIA Portal SINAMICS 驱动集成完整指南

    通过单击 Startdrive “调试向导”节点启动它。 应用类 调试向导启动,我们看到第一步是指定我们正在使用驱动器应用程序应用程序类。两个应用程序类是标准和动态。...综合安全调试 要启动驱动集成安全调试,请在项目打开驱动参数节点。在此处单击 Safety Integrated 屏幕上“Start Safety Integrated 调试”。...您可以看到标签不存在,因为它们都有红色错误下划线。可以继续块界面中一一定义这些标签,或者为了尽可能高效,可以批量定义这些标签。为此,请右键单击网络并单击“定义标签...”...接下来,我们可以在数据类型列定义所有标签数据类型。最后,我们可以为每个标签添加注释。由于这是一个演示,不会添加评论。显然,清楚地注释生产系统所有标签是一种很好做法。...要将采集时间从 1 秒增加到 100 毫秒。这种更快采集时间可以防止 HMI 图形看起来滞后。我们可以标签编辑器每个标签设置 HMI 标签获取时间。

    3K30

    D3数据连接之“进入”

    当你点击这些按钮,图形会发生变化:位置偏移了,发光或者闪烁,颜色也变了,甚至可以一起从屏幕飞出——要多疯狂有多疯狂。...(实际上,直接从D3搬来了“enter”、“update”及“exit”这些词。) 此外,D3让你可以基于数据执行上述所有操作。D3通过一种称为“数据绑定”技术来达成这种能力。...为了说明数据连接是如何工作打算引入一个新示例—— 一个涉及数据连接基本概念各方面知识点示例。为了构建之前那幅人口分布条形图,我们也会引入数据连接,但不会描述得那么完整。...现在,让我们先忘掉这些条形,并且仅从这些人物名字开始。我们可以用for循环为每个名字添加一个文本节点,但是我们不打算这么做。忘掉for循环,我们正在考虑数据连接,我们想让文本“进入”页面。...用文本元素替换占位数据 现在,我们已经页面上放置了4个文本元素,但是其中还没有任何文字,所以我们页面是空白如何让那些名人姓名显示正确位置呢?奥秘就在data()方法

    1.1K20

    浏览器工作原理

    元素是文档第一个标签和根节点反映了不同标签之间关系和层次结构。 我们有父节点,嵌套在其他标签标签是子节点节点数越多,构建 DOM 所需时间就越长。...调用堆栈是解释器(如 Web 浏览器 JavaScript 解释器)跟踪其调用多个函数脚本位置机制——当前正在运行函数以及从该函数调用函数等。...对于 DOM 中找到每个可见节点,将在 CSSOM 中找到相应规则并应用它们。以上步骤结果将是一个包含所有可见节点、内容和样式渲染。...布局(回流)阶段渲染包含有关显示哪些节点及其计算样式信息,但不包含每个节点尺寸或位置。接下来需要做是计算这些节点在设备视口(浏览器窗口内)内的确切位置及其大小。...绘画(重绘)阶段浏览器决定哪些节点需要可见并计算出它们视口中位置后,就可以屏幕上绘制它们(渲染像素)了。 这个阶段也被称为光栅化阶段,浏览器将在布局阶段计算每个盒子转换为屏幕上实际像素。

    25310

    重新认识HTML渲染过程

    第三步是计算出DOM每个节点具体样式:css有继承规则和层叠规则。...层叠规则更简单,css本来也是层叠样式表缩写,定义了如何合并多个来源属性值算法,理解就是权重。...3、布局 以前说render是很早时候,说是16年以前东西,代码早就重构,现在是LayoutTree,也就是布局。布局是计算出DOM可见元素几何位置。...执行布局操作时候,会把布局运算结果重新写回布局,所以布局既是输入内容也是输出内容,这是布局阶段一个不合理地方,因为布局阶段并没有清晰地将输入内容和输出内容区分开来。...并不是布局每个节点都包含一个图层,如果一个节点没有对应层,那么这个节点就从属于父节点图层。

    1.5K30

    Vcl控件详解_c++控件

    标签行数大于1时,当单击其它页时,它下面的页会自动翻动该控件底部 Style:设置该控件样式,大家一试就会知道 TabHeight:设置页标签高度 TabIndex:反映当前标签索引号...该号从0开始 TabPosition:选择页标签位置,分上,下,左,右 Tabs:对每个页进行增,删,改 TabWidth:设置页标签宽度 方法 GetHitTestInfoAt...:指定数值判断该位置位于该控件是什么位置 IndexOfTabAt:返回指定位置是在哪个页标签上,并返回它索引号 RowCount:返回页标签行数 ScrollTabs:当MultiLine...与上面的区别是事件可以得到它新值和单击是向上还是向下按钮 onClick:单击按钮时触发 THotKey 属性 HotKey:设置或获取热键 InvalidKeys:设置不允许有哪些热键...:绘制组件子项目期间不同状态触发 OnChange:当列表项目改变时触发 OnChanging:当列表项目正在改变时触发 OnColumnClick:当单击列时触发 OnColumnDragged

    4.9K10

    【白话机器学习】算法理论+实战之决策

    分别计算每个特征条件熵(就是划分之后混乱度) 首先将天气作为属性划分,会有三个叶子节点 D1、D2 和 D3,分别对应是晴天、阴天和小雨。我们用 + 代表去打篮球,- 代表不去打篮球。...方法是构造过程节点进行评估,如果对某个节点进行划分,验证集中不能带来准确性提升,那么对这个节点进行划分就没有意义,这时就会把当前节点作为叶节点,不对其进行划分。...回归可以对连续型数值进行预测,也就是数据某个区间内都有取值可能,它输出是一个数值。...具体例子,看《统计学习方法之决策》 4.3.2 如何使用CART算法来创建分类 上面已经知道了CART算法是基于基尼指数来做属性划分。... CART 分类采用是基尼系数作为标准,那么 CART 回归如何评价“不纯度”呢?实际上我们要根据样本混乱程度,也就是样本离散程度来评价“不纯度”。

    65810

    数据可视化工具d3_前端3d可视化

    为简单起见,只绘制矩形部分,用以讲解如何使用 D3 SVG 画布绘图。 画布是什么 之前处理对象都是 HTML 文字,没有涉及图形制作。要绘图,首要需要是一块绘图“画布”。...绘制矩形 绘制一个横向柱形图。只绘制矩形,不绘制文字和坐标轴。 SVG ,矩形元素标签是 rect。...其起始状态是 y 轴等于 0 位置(但要注意,不能在起始状态直接返回 0,要应用比例尺计算画布位置)。终止状态是目标值。... D3 ,每一个选择集都有 on() 函数,用于添加事件监听器。 on() 第一个参数是监听事件,第二个参数是监听到事件后响应内容,第二个参数是一个函数。...,所以调用 append(“path”) 后,每个 g 中都有 path 。

    12.8K40

    JavaScript图表数据可视化:比较D3和Kendo UI

    D3和Kendo UI只是web应用程序创建图表两种方式,选项范围从简单地屏幕上绘制图形到使用复杂图表组件。D3和Kendo UI都很受欢迎,两者都能完成工作。...想要实现图表(Excel绘制,以保持中立)是: ? 此外,为了展示如何做一些基本动画,我们还添加了一些工具提示,以便在鼠标滑过其中一个栏时,可以看到该栏显示值。...X轴是根据数据集中数量进行缩放。在下一节,我们将在显示区域略微移动图表。 现在我们开始讲D3部分内容。在这里,我们告诉D3我们将使用哪些数据,并指定图表每个条形图基本元素。...我们只告诉D3我们想把它放在平移位置,然后告诉它添加坐标轴并给它数据。 Kendo UI方面,我们已经有了Y轴和X轴线,我们只需要标签。...如果您正在做一些非常不寻常事情,需要进行极端定制,或者正在处理一个类项目,或者其他非商业应用程序,并且您喜欢玩代码,那么D3就是一个很好选择。这两个选项肯定比绘制单个矩形更好!

    11.9K30

    从URL输入到页面展现到底发生什么?1

    DNS负载均衡(DNS重定向) DNS负载均衡技术实现原理是DNS服务器为同一个主机名配置多个IP地址,应答DNS查询时, DNS服务器对每个查询将以DNS文件主机记录IP地址按顺序返回不同解析结果...当你浏览网页时,浏览器会在加载网页时对网页域名进行解析缓存,这样在你单击当前网页连接时就无需进行 DNS 解析,减少用户等待时间,提高用户体验。...DOM构建:因为HTML标记定义就是不同标签之间关系,这个关系就像是一个树形结构一样例如:body对象节点就是HTML对象,然后段略p对象节点就是body对象2....合并DOM和CSS规则,生成render当DOM和CSSOM都有了后,就要开始构建渲染了一般来说,渲染和DOM相对应,但不是严格意义上一一对应,因为有一些不可见DOM元素不会插入到渲染...布局render(Layout/Reflow),负责各元素尺寸、位置计算布局:通过渲染渲染对象信息,计算出每一个渲染对象位置和尺寸。5.

    57520

    从URL输入到页面展现到底发生什么?

    DNS负载均衡(DNS重定向) DNS负载均衡技术实现原理是DNS服务器为同一个主机名配置多个IP地址,应答DNS查询时, DNS服务器对每个查询将以DNS文件主机记录IP地址按顺序返回不同解析结果...当你浏览网页时,浏览器会在加载网页时对网页域名进行解析缓存,这样在你单击当前网页连接时就无需进行 DNS 解析,减少用户等待时间,提高用户体验。...DOM构建:因为HTML标记定义就是不同标签之间关系,这个关系就像是一个树形结构一样例如:body对象节点就是HTML对象,然后段略p对象节点就是body对象2....合并DOM和CSS规则,生成render当DOM和CSSOM都有了后,就要开始构建渲染了一般来说,渲染和DOM相对应,但不是严格意义上一一对应,因为有一些不可见DOM元素不会插入到渲染...布局render(Layout/Reflow),负责各元素尺寸、位置计算布局:通过渲染渲染对象信息,计算出每一个渲染对象位置和尺寸。5.

    55920

    从URL输入到页面展现到底发生什么?1

    DNS负载均衡(DNS重定向) DNS负载均衡技术实现原理是DNS服务器为同一个主机名配置多个IP地址,应答DNS查询时, DNS服务器对每个查询将以DNS文件主机记录IP地址按顺序返回不同解析结果...当你浏览网页时,浏览器会在加载网页时对网页域名进行解析缓存,这样在你单击当前网页连接时就无需进行 DNS 解析,减少用户等待时间,提高用户体验。...DOM构建:因为HTML标记定义就是不同标签之间关系,这个关系就像是一个树形结构一样例如:body对象节点就是HTML对象,然后段略p对象节点就是body对象2....合并DOM和CSS规则,生成render当DOM和CSSOM都有了后,就要开始构建渲染了一般来说,渲染和DOM相对应,但不是严格意义上一一对应,因为有一些不可见DOM元素不会插入到渲染...布局render(Layout/Reflow),负责各元素尺寸、位置计算布局:通过渲染渲染对象信息,计算出每一个渲染对象位置和尺寸。5.

    57130

    浅析AndroidStudio3.0最新 Android Profiler分析器(cpu memory network 分析器)

    图中每个箭头都是从调用者到callee。 下图所示,顶部down选项卡扩展方法A节点将显示它callees、方法B和D。...在此之后,扩展方法D节点将暴露它callees、方法B和C,等等。与火焰图选项卡类似,顶部向下聚合跟踪信息,用于共享相同调用堆栈相同方法。也就是说,火焰图标签提供了顶部下标签图形表示。...使用上图所示例子,下图提供了一个自下而上方法C .自下而上打开方法C节点,显示每个独特调用者,方法B和d .注意,虽然B两次调用C,B当扩大节点只出现一次自下而上方法C。...您可以检查每个节点,以确定哪些调用者调用这些方法上花费最多CPU时间。与上面的相比,底部每个方法定时信息都是每棵顶部(顶部节点)方法。...每个对象使用多少内存 每个对象引用被保留在你代码。 调用堆栈,用于分配对象位置(只有在记录分配时捕获堆转储)。 ?

    3.2K10

    HTMLCSSJS 是如何在浏览器,渲染成你看到页面?【图解Chrome】

    主线程将解析 CSS,并将效果渲染到指定 DOM 节点上,关于 CSS 选择器如何定位到指定 DOM 节点,可以通过 DevTools 来查看相关信息。...即使你不使用任何 CSS 样式,每个 DOM 节点依然存在默认渲染样式。例如, h1 标签在视觉上就大于 h2 标签,并且每个元素还有默认边距。这是因为浏览器具有默认样式表。...假设你正在尝试重绘一幅画,你除了需要知道元素大小、外观和位置之外,还需要知道它们绘制顺序。...现在浏览器知道文档结构,每个元素样式,页面的形状和绘制顺序,它是如何绘制页面的?将此信息转换为屏幕上像素称为光栅化(rasterizing)。...[strip] 你可以 DevTools Layout panel 来查看看图层。 分层 为了确定每个元素所在层,主线程遍历布局以创建层(Layer Tree)。

    4.8K50
    领券