【D3.js in Action 3 精译_018】2.4 向选择集添加元素

当前内容所在位置

  • 第一部分 D3.js 基础知识
    • 第一章 D3.js 简介(已完结)
      • 1.1 何为 D3.js?
      • 1.2 D3 生态系统——入门须知
      • 1.3 数据可视化最佳实践(上)
      • 1.3 数据可视化最佳实践(下)
      • 1.4 本章小结
    • 第二章 DOM 的操作方法
      • 2.1 第一个 D3 可视化图表
      • 2.2 环境准备
      • 2.3 用 D3 选中页面元素
      • 2.4 向选择集添加元素 ✔️
      • 2.5 用 D3 设置与修改元素属性
      • 2.6 用 D3 设置与修改元素样式

2.4 向选择集添加元素

选择集虽好,但如果不对其进行任何操作的话也没太多用处。D3 选择集的一个经典用法是先获取一个选择集,进而将另一个元素追加(append)到该选择集内。尽管 JavaScript 已经提供了追加元素的原生接口,但 D3 让这个操作更加简单流畅。

通过 D3 向选择集添加元素的主要方法是 selection.append()append() 方法以新增元素的类型(type)或标签名为参数,并将新元素添加为选择集的最后一个子元素(如图 2.9 所示):

图 2.9 append() 方法
图 2.9 append() 方法

回到之前的虚构 DOM 树示例。如果要给 SVG 容器追加一个矩形元素,则可以先获取 SVG 容器的选择集,然后在该选择集上链式调用 append() 方法,并将目标节点类型(type,即 rect 元素)作为参数传入 append() 方法(如图 2.10 所示)。

d3.select("svg").append("rect");

图 2.10 用 selection.append() 方法将元素添加为选择集的最后一个子元素
图 2.10 用 selection.append() 方法将元素添加为选择集的最后一个子元素

也可以使用 d3.selectAll("div") 来获取包含 DOM 中每个 div 节点的选择集,并将段落元素分别添加到每个节点中,如图 2.11 所示:

d3.selectAll("div").append("p");

图 2.11 与 d3.selectAll() 连用后,append 方法将节点添加到选择集的每个元素中
图 2.11 与 d3.selectAll() 连用后,append 方法将节点添加到选择集的每个元素中

接下来趁热打铁,一起来构建本章前面提到的那个条形图。

首先确认一下,在代码编辑器中打开的仍然是本章源码文件中的 start 文件夹,并且本地 Web 服务器正在运行(关于借助 VS Code 的 Live Server 扩展程序启动 Web 服务器的具体方法,请参考 附录 A)。然后打开 index.html 文件。注意,该文件包含一个类名为 responsive-svg-containerdiv 元素。

正如第一章所述,大多数 D3 可视化项目都是用 SVG 元素构建的,这里的条形图也不例外。为此,需要一个 SVG 容器,并将 SVG 图形放入其中。我们先来添加 SVG 元素。

打开 /js/main.js 文件。使用 d3.select() 方法选中具有 responsive-svg-container 类的 div,并在该 div 中添加一个 SVG 元素,如以下代码所示:

d3.select(".responsive-svg-container").append("svg");

保存 main.js 文件,并在浏览器中查看效果。此时视口中看不到任何变化,但如果打开浏览器检查工具(如图 2.12 所示),则会看到 SVG 元素已经被精确添加到 DOM 树中,正如我们所希望的那样!

图 2.12 向 DOM 树添加 SVG 元素节点效果图
图 2.12 向 DOM 树添加 SVG 元素节点效果图

下一小节,我们将通过设置 viewBox 属性来得到一个响应式的 SVG 容器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/381050.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Express+mysql单表分页条件查询

声明(自己还没测试过,只提供大概逻辑,什么多表连接查询可以在原基础上添加) class /*** param connection Express的mysql数据库链接对象* current 当前页* pageSize 一页显示行数* where [{key:id,operator:,value15}], key查询…

js拖拽div的例子

当需要在网页中实现拖拽功能时&#xff0c;可以使用JavaScript来实现。下面是一个简单的例子&#xff0c;演示如何实现拖拽一个 <div> 元素&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <…

动态路由协议 —— EIGRP 与 OSPF 的区别

EIGRP&#xff08;增强内部网关路由协议&#xff09;和 OSPF&#xff08;开放式最短路径优先&#xff09;是两种最常见的动态路由协议&#xff0c;主要是用来指定路由器或交换机之间如何通信。将其应用于不同的情况下&#xff0c;可提高速率、延迟等方面的性能。那么它们之间到…

微信小程序数组绑定使用案例(二)

一、数组事件绑定&#xff0c;事件传递数据 1.wxml <text>姓名&#xff1a;{{name}} </text> <block wx:for"{{list}}"><button bind:tap"nameClick2" data-name"{{item}}">修改:{{item}}</button> </block&…

【Linux知识点汇总】07 Linux系统防火墙相关命令,关闭和开启防火墙、开放端口号

​完整系列文章目录 【Linux知识点汇总】 心血来潮突然想起之前写过的系列文章【Linux知识点汇总】还未完结&#xff0c;那么今天就继续吧 说明&#xff1a;这个系列的内容&#xff0c;在系列【Linux服务器Java环境搭建】中会经常用到&#xff0c;大家可以自行查找相关命令 一、…

springboot开发实用篇

一、Mongodb &#xff08;1&#xff09;简介 MongoDB是一个开源、高性能、无模式的文档型数据库。NoSQL数据库产品中的一种&#xff0c;是最像关系型数据库的非关系型数据库。 数据库&#xff1a;永久性存储&#xff0c;修改频率极低 Mongodb&#xff1a;永久性存储与临时存…

使用百度语音技术实现文字转语音

使用百度语音技术实现文字转语音 SpringBootVue前后端分离项目 调用api接口需要使用AK和SK生成AccessToken,生成getAccessToken的接口有跨域限制,所以统一的由后端处理了 部分参数在控制台->语音技术->在线调试里面能找到 Controller RestController RequestMapping(&q…

游戏常用运行库安装包 Game Runtime Libraries Package

游戏常用运行库安装包&#xff08;Game Runtime Libraries Package&#xff09;是一个整合了多种游戏所需运行库的安装程序&#xff0c;旨在帮助玩家和开发者解决游戏无法正常运行的问题。该安装包支持从Windows XP到Windows 11的系统&#xff0c;并且具备自动检测系统并推荐合…

【python】OpenCV—Extreme Points in the Contour

文章目录 1、需求描述2、功能实现3、更多的例子4、完整代码5、参考 1、需求描述 给一张图片&#xff0c;找出其轮廓&#xff0c;并画出轮廓的上下左右极值点 输入图片 输出效果 2、功能实现 # 导入必要的包 import imutils import cv2 # 加载图像&#xff0c;将其转换为灰度…

【数据集处理工具】将COCO格式数据集的val.json与tett.json文件合并为一个json

合并COCO数据集JSON文件的Python脚本 1、目的2、功能概述3、使用方法4、注意事项5、 代码部分 1、目的 此Python脚本旨在帮助用户合并多个COCO格式的数据集JSON文件&#xff0c;特别适用于将验证集和测试集的标注数据整合到单一文件中。 该脚本假设各个数据集的类别信息&…

django踩坑(四):终端输入脚本可正常执行,而加入crontab中无任何输出

使用crontab执行python脚本时&#xff0c;有时会遇到脚本无法执行的问题。这是因为crontab在执行任务时使用的环境变量与我们在终端中使用的环境变量不同。具体来说&#xff0c;crontab使用的环境变量是非交互式(non-interactive)环境变量&#xff0c;而终端则使用交互式(inter…

国内访问Docker Hub慢问题解决方法

在国内访问Docker Hub时可能会遇到一些困难&#xff0c;但幸运的是&#xff0c;有多种解决方案可以帮助你顺利下载Docker镜像。以下是一些有效的解决方案&#xff1a; 配置Docker镜像源&#xff1a;你可以通过配置Docker的daemon.json文件来使用国内镜像源&#xff0c;比如DaoC…

基于若依的ruoyi-nbcio流程管理系统修正自定义业务表单的回写bug

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; h…

项目收获总结--大数据量存储架构设计方案

项目收获总结--大数据量存储架构设计方案 一、背景二、数据存储层技术选型2.1 MySQL2.2 MongoDB2.3 HBase2.4 HBaseElasticSearch 三、HBaseElasticSearch基本原理3.1 前置考虑3.2 HBaseElasticSearch优点3.3 HBaseElasticSearch缺点 四、HBaseElasticSearch数据一致性架构4.1 …

linux系统设置开机启动的两种方法systemd及rc.local(手工写sh脚本,手工写service服务)

文章目录 知识点实验一、systemd&#xff08;一&#xff09;自写一个sh脚本并加入开机启动&#xff08;二&#xff09;源码安装的nginx加入开机启动 rc.local 知识点 在Linux系统中&#xff0c;有多种方法可以设置开机启动。以下是其中的一些主要方法&#xff1a; systemd 在较…

3.3-LSTM的改进

文章目录 1改进点1.1多层化1.2 dropout1.2.1具体概念1.2.2应该插入到LSTM模型的哪里 1.3权重共享 2改进之后的LSTMLM的代码实现2.1初始化2.2前向计算2.3反向传播 3相应的学习代码的实现4总结 1改进点 1.1多层化 加深神经网络的层数往往能够学习更复杂的模式&#xff1b;因此这…

5种梯度下降法的公式

5种梯度下降法的公式推演&#xff1a; 1. 梯度下降 (Gradient Descent) 梯度下降法的更新公式为&#xff1a; θ t 1 θ t − η ∇ θ J ( θ ) \theta_{t1} \theta_t - \eta \nabla_\theta J(\theta) θt1​θt​−η∇θ​J(θ) 其中&#xff0c; θ t \theta_t θt​…

Tomcat服务器

1.Tomcat定义以及作用 Web服务器是一个应用程序(软件)&#xff0c;对HTTP协议的操作进行封装&#xff0c;使得程序员不必直接对协议进行操作。(不用程序员自己写代码去解析http协议规则&#xff0c;比如不用考虑响应码的问题&#xff0c;以及响应数据应该如何写)&#xff0c;让…

ZK学习笔记

ZK 一.基本概念 Zookeeper是⼀个开源的分布式协调服务&#xff0c;其设计⽬标是将那些复杂的且容易出错的分布式⼀致性服务封装起来&#xff0c;构成⼀个⾼效可靠的原语集&#xff0c;并以⼀些简单的接⼝提供给⽤户使⽤。 zookeeper是⼀个典型的分布式数据⼀致性的解决⽅案&…

在 PostgreSQL 里如何实现数据的冷热数据分层存储的自动化策略调整?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 在 PostgreSQL 里如何实现数据的冷热数据分层存储的自动化策略调整 在 PostgreSQL 里如何实现数据的冷…