d3.select选取元素后添加事件不成功

最新推荐文章于 2023-07-03 18:44:55 发布
最新推荐文章于 2023-07-03 18:44:55 发布
阅读量344 收藏
点赞数
分类专栏： 各种编程bug 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45903314/article/details/123448069
版权
本文档探讨了在D3.js中遇到的元素选择后事件绑定无效的问题。问题源于JavaScript代码执行时DOM尚未加载完成。解决方案是将JavaScript脚本放在HTML文档的底部，确保在执行时DOM已经构建完毕，从而正确选择并修改p元素的颜色。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

d3.select选取元素后添加事件不成功

问题代码

代码如下：实现十分简单的功能
选中p元素，将其颜色改为红色
在这里插入图片描述
但界面上并没有改变：
在这里插入图片描述

问题解决

一开始以为是自己跟着课本样例代码打，课本上d3版本太老了（v3），但后来反应过来是html文档总是从上往下加载，所以在我js执行的时候，都还不存在p元素！
在这里插入图片描述
在这里插入图片描述
放到script元素上方就好了

[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边
杨秀璋的专栏
02-12 8919
前文介绍了Python3抓取电影实体知识，Seaborn可视化展示电影信息，D3可视化布局，关系图谱基本构建。本篇文章将实现如下图所示的功能，主要包括：1.建立两种模式，点击“节点”显示所有圆，点击“文字”显示实体名称 2.添加鼠标响应事件，选中某一个节点显示其相关的节点及边 3.鼠标放开恢复所有节点
d3选择集合的操作方法 一 select与selectAll
qq_44884577的博客
04-13 6880
d3选择集合的操作方法 一 select与selectAll
D3 V4 各种鼠标事件的添加
happy81997的博客
12-14 985
目录 一、拖拽节点 二、放大缩小 D3 V4 各种鼠标事件的添加 一、拖拽节点 //定义拖拽事件 function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); } // //节点绑定事件 g.selectAll("circle") .data(points) .enter().append("circle") .attr("cx", f.
d3.select(this)不能用箭头函数
weixin_30802171的博客
11-10 419
d3中典型的数据绑定片段 const items = svg.selectAll('g') .data(gdfs,(d)=> d.name); const enter = items.enter().append('g'); //console.log(enter); //没有update()函数了，添...
[数据可视化]d3js源码,selection(四)添加事件,控制流,局部变量
Dosth_Magic
07-02 1085
selection模块结构 选择元素 修改元素 加入数据 处理事件(本章的内容) 控制流(本章的内容) 局部变量(本章的内容) 命名空间 事件处理 出于交互考虑，selection支持监听(listening)和分派(dispatching)事件。 selection.on(typenames[, listener[, options]]) 根据typenames向元素添加或删除事件监听，类型...
[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边（源码）
02-13
前文介绍了Python3抓取电影实体知识，Seaborn可视化展示电影信息，D3可视化布局，关系图谱基本构建。本篇文章将实现如下图所示的功能，主要包括： 1.建立两种模式，点击“节点”显示所有圆，点击“文字”显示实体名称 2.添加鼠标响应事件，选中某一个节点显示其相关的节点及边 3.鼠标放开恢复所有节点 --------------------- 作者：Eastmount 来源：优快云 原文：https://blog.csdn.net/Eastmount/article/details/87116136 版权声明：本文为博主原创文章，转载请附上博文链接！
D3.js可视化库 v6.1.1.zip
最新发布
03-18
7. **事件处理**：D3.js允许用户添加交互元素，如点击、悬停等，从而与数据可视化进行互动，增强用户的探索性分析能力。 8. **版本6.1.1的特性**：在D3.js v6.1.1中，可能包括了性能优化、bug修复、新功能的引入等...
d3.js示范代码，很多很多，很好用
05-31
例如，`d3.select()`和`d3.selectAll()`可以选取单个或多个元素，然后通过链式调用来执行变换和操作。 3. **数据进入、更新和退出（Enter, Update, Exit）** 这是D3.js处理动态数据流的关键机制。当数据发生变化时...
使用D3.js制作图表详解
10-19
`d3.select()`选取第一个匹配的元素，而`selectAll()`则选取所有匹配的元素。此外，`append()`方法用于向选定的元素后面添加新的子元素，`attr()`方法用于设置或获取元素的属性值。 在创建可视化图表时，例如柱状图...
d3.js-demo:一些小的d3.js的demo，欢迎大家下载
05-12
3. **选择集和操作**：d3.select()和d3.selectAll()用于选取DOM元素，而.append(),.enter(),.exit(),.update()等方法则用于创建、更新和移除元素。 4. **SVG绘图**：d3.js广泛使用SVG（Scalable Vector Graphics）...
d3.js-master_d3_源码
10-04
通过`d3.select()`和`d3.selectAll()`，可以选取单个或多个元素，然后使用链式方法进行操作。 - **绑定数据（Data Binding）**: d3.js的另一个关键特性是将数据绑定到DOM元素，使每个元素与特定的数据值关联。 - *...
HTML select 用法及常用事件
sout-lanys
07-03 5210
用于记录开发中常用到的，快捷开发后续用到的我会继续写进去，如果有大佬遇到其他常用的，欢迎评论。
d3登录显示无效服务器,D3选择：.classed（{}）无效，.style（{}）
weixin_36160969的博客
08-08 301
我是D3的新手，并在Lynda课程“使用D3.js进行数据可视化”中学习它。以下代码无法更改所选元素的样式。这和教学练习完全一样。D3选择：.classed({})无效，.style({})d3.selectAll('.item:nth-child(2)').classed({'highlight': true,'item': false,'bigger': true})但是，在我运行下面的代码后...
D3.js 学习 - 1 - D3基本使用 （d3-selection 选择集）
shidouyu的专栏
02-24 1166
D3.js 学习 - 1 - D3基本使用 （d3-selection 选择集） D3 简介 D3 是一个 Javascript 库，用于创建数据可视化图形，全称 Data-Driven Documents 也就是数据驱动文档，文档指的就是基于 web 的文档，代表可以在浏览器中展示的一切，包括 SVG 以及 一般的 HTML ， D3扮演的是一个驱动程序的角色，联系着数据和文档 与 ECharts 图表相比，D3.js 不会生成事先定义好的图表，而是给你提供一些方法用来生成带数据的标签，绑定可
d3.select
csdn_huangyumin的博客
11-04 4089
d3虽然是一个很强大的js库，但是作为初学者并且只是为了一个临时项目才用它的人来说，深入研究它并没有什么必要。我目前只是采用了它的比较强大的selection以及部分函数功能，实际上这部分功能利用DOM的方法也能做到，只是比较烦琐一些。 但是d3也有一些不方便的地方，可能也是我学的比较深入的缘故，比方说我们都习惯用下面这个方法选中指定的标签 d3.select("g#g123")
D3 select&selectAll
热门推荐
Claroja
04-09 1万+
<html> <body> <p>hello world</p> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script&
d3事件(二):事件的触发与自定义事件
甘焕的博客
08-05 1万+
在第4版中，d3新增了事件的触发函数dispatch，类似于jquery的trigger函数，用于触发dom元素的事件处理函数。并且，d3的选择集合还可以注册任意名称的事件与相关的事件处理函数，即自定义事件。      假定页面中还存在文章”d3事件(一):事件的注册与命名空间”的相关元素，基于此我们进行如下操作。d3.selectAll('button') // d代表绑定的数据，i代表
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值