当前位置: 首页 > news >正文

【D3.js in Action 3 精译_020】2.6 用 D3 设置与修改元素样式 + 名人专访(Nadieh Bremer)+ 2.7 本章小结

当前内容所在位置

  • 第一部分 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.7 本章小结 ✔️

2.6 用 D3 设置与修改元素样式

为了让可视化元素拥有想要的外观和感觉,需要为其设置样式。使用传统的 CSS 样式表就是一种不错的方案,通常也是考虑后期可维护性时的优先方案。但有时直接使用 D3 来设置与修改样式属性同样很方便,尤其是在样式随数据动态变化的时候。

D3 通过 selection.style() 方法设置与修改元素的样式属性(attribute)。该方法需要两个参数:样式属性的名称及其属性值,如图 2.16 所示:

图 2.16 style() 方法

图 2.16 style() 方法

回到条形图示例,在 main.js 中,在 SVG 容器选择集上链式调用 style() 方法,即赋值到常量 svg 上的方法。如以下代码所示,使用 style() 方法为 SVG 容器应用边框样式,可以赋值为任何想要的属性值。本例中使用简写样式,设置一个宽度 1px 的黑色边框:

const svg = d3.select(".responsive-svg-container").append("svg").attr("viewBox", "0 0 1200 1600").style("border", "1px solid black");

SVG 容器四周的边框有助于直观了解当前所处的空间区域,并理解 style() 方法的工作原理。

保存项目并在浏览器中查看效果。从 DOM 检查工具中找到 SVG 容器,可以看到 border 属性(property)被添加到了 style 属性(attribute)中,如图 2.17 所示。也就是说 style() 方法注入了所谓的行内样式。

图 2.17 使用 style() 方法生效的边框样式

图 2.17 使用 style() 方法生效的边框样式

在处理 SVG 元素时,有些样式可以通过 attribute 属性或行内样式来生效,例如 fillstroke 属性(properties)。至于应该使用 attr() 还是 style() 方法来设置样式并没有严格的规定,但一些开发人员更愿意保持一致,始终使用 CSS 样式表样式(或行内样式)来设置样式,而不是通过元素的 attribute 属性。这也许是一个不错的做法,尤其是在我们希望分开创建形状的代码与设置外观的代码、使得层叠样式更易于管理的时候。本书将使用 attr()style() 方法以及外部 CSS 文件来设置 SVG 元素的视觉属性。

例如,在 main.js 中,在矩形选择集上调用 style() 方法,并对该矩形设置与之前不同的填充色 "plum",如以下代码所示:

svg.append("rect").attr("x", 10).attr("y", 10).attr("width", 414).attr("height", 16).attr("fill", "turquoise").style("fill", "plum");

然后打开 main.css 文件,为该矩形添加第三个 fill 属性(property),令其颜色值为 "orange"

rect {fill: orange;
}

此时该矩形拥有三种不同的填充样式:一个是通过元素 attribute 属性设置的青绿色 "turquoise";一个是通过行内样式应用设置的深紫色 "plum";最后是通过外部 CSS 样式设置的橙黄色 "orange"。当然,实际工作不会这样设置,本例仅供演示。

保存项目,注意观察借助 style 属性设置的 fill 样式是如何覆盖另两种样式的。在图 2.18 中,您可以看到样式中的层叠规则是如何生效的:行内样式覆盖了其余样式,其次是外部 CSS 样式表设置的样式,最后是通过 attribute 属性设置的 fill 样式。牢记这一规则将有助于制定适合自己习惯、团队和项目的策略,同时也可以在遇到下面的问题时摆脱百思不得其解的窘境:为什么这种样式在屏幕上可见、而另一种偏偏就不可见呢?

图 2.18 填充样式 fill 同时在 attribute 属性、外部样式表及行内样式应用的效果对比

图 2.18 填充样式 fill 同时在 attribute 属性、外部样式表及行内样式应用的效果对比

至此,我们已经知道如何获取选择集、如何在 DOM 中添加元素、以及如何给这些元素设置方位与样式。但是,真要像示例这样逐一添加条形图的各个矩形条,效率肯定高不了。等下一章学了数据绑定的相关知识后,就能一次性添加所有的矩形条了。在此之前,需要删除 main.jsmain.css 中与矩形相关的代码,让 main.js 文件只包含如下所示的代码。第三章将从这里开始构建条形图:

代码清单 2.2 本章结束时 main.js 的代码内容

const svg = d3.select(".responsive-svg-container").append("svg").attr("viewBox", "0 0 1200 1600").style("border", "1px solid black");

人物专访:纳迪埃·布雷默(Nadieh Bremer)

纳迪埃·布雷默 是一位数据可视化艺术家。

【问】能否介绍一下您的背景,以及您是如何进入数据可视化领域的?

【Nadieh】 我毕业时是一名天文学家,之后开始从事数据科学方面的工作。然而,几年后,我意识到自己缺少了工作中富有创意的一面。当我看到别人称他们自己为“数据可视化专家”时,我立刻意识到这正是我可以兼顾的地方:在调查数据、探寻故事、玩转数学的同时发挥自己的创造力。

【问】在没有 Web 开发背景的情况下,是什么促使您学习 D3?遇到的主要挑战是什么,又是如何克服的呢?

【Nadieh】 我参加了一次 D3.js 研讨会(2013 年),会上人们展示了包括交互在内的 D3 的各种可能性。尤其是在当时,我从未见过这样的新事物,我知道自己也想创建出这样的交互式数据可视化效果。于是便买了一本斯科特·穆雷(Scott Murray)写的书《网络交互式数据可视化》(Interactive Data Visualization for the Web,O’Reilly,2017 年),并从那本书开始了 D3 的学习。当时面临的主要挑战是,HTML / CSS / JavaScript 对我来说都是全新的(尽管我知道如何用 R 语言编程)。因此除了 D3 外,我还必须学习这些语言;而且,由于我的无知,我都不知道 D3 的独特之处在哪儿,什么又叫原生 JavaScript(vanilla JavaScript),以致于常常会被卡在一些细枝末节上,不知道如何从网上搜索答案。总的来说,凭借极致的毅力,并确信当时所从事的是自己真正热衷的项目,才让我最终坚持了下来。不知不觉地,我对这些知识的理解也越来越透彻。我花了整整一年的时间才理解了 D3 的“进入-更新-退出”(enter-update-exit)流程,哈哈。

【问】除了 D3,您还使用其他可视化工具吗?D3 在您当前的数据可视化工作流程中处于什么位置?我看到您在项目中经常用到 R 语言。

【Nadieh】 D3 确实是我的主要工具。我 90% 的数据可视化项目都会在开始制作最终视觉效果时加载 D3。此外,我还会使用 JavaScript 和其他一些库,如用于处理颜色的 Chroma.js 以及用于处理噪声函数(noise functions)的 SimplexNoise。我总是先用 R 语言进行数据分析和数据准备,创建大量简单的图表,以便对这些数据产生独到而深入的理解。但我从不把这些图表作为最终的视觉效果。

  • Nadieh 精品项目《太空大战》(www.visualcinnamon.com/portfolio/space-wars/)

发表在《科学美国人》杂志的纳迪埃·布雷默的作品《太空卫星的可视化效果》(Visualization of satellites in space)

发表在《科学美国人》杂志的纳迪埃·布雷默的作品《太空卫星的可视化效果》(Visualization of satellites in space)


【问】再来聊聊您为 2020 年 11 月版的《科学美国人》创作的《太空大战》这部作品吧?

【Nadieh】 《太空大战》可视化展示了(当时)仍在太空中活动的所有卫星情况,主要目的是为了显示谁拥有这些卫星、以及可以在哪些轨道上找到它们。通过将每颗卫星视为单独的小圆圈,再按国家和轨道进行分组,可以非常直观地展示卫星本身的详细情况,如重量、年限、所属分类等等。

【问】能再介绍一下这个项目的创作过程吗?

【Nadieh】 幸好数据是由一位卫星专家收集的,所以我不需要做任何数据处理,只需要进行一些数据分析,就能了解我所掌握的情况。我在一个小册子上记录了一些想法。我知道要在国家和轨道分类上做文章。不过,关于每颗卫星的元数据实在太多,只能分别展示每颗卫星。也不知道从哪里冒出来的想法,但在某个时刻,我绘制了一幅用圆圈表示卫星的树形地图。当最初的想法逐渐明晰起来后,剩下的工作就分成了两个部分:一个是技术部分——如何在树形地图中使用圆圈;另一个是如何让整体设计看起来更美观。一开始效果看起来很糟糕,但后来我花了一些时间从最喜欢的科幻电影中寻找色彩灵感,才找到真正想要的视觉效果。

【问】在外人看来,您似乎是将 D3 的树形图的绘制手法与力导向图的布局相结合来生成这种可视化效果的,是这样吗?将不同模块的方法有机结合来创建前所未见的布局效果,这也是我最喜欢 D3 的原因之一。看了您在 Skillshare 平台的主讲课程《数据可视化:通过自定义图表获得美感与影响力》(Data Visualization: Customizing Charts for Beauty & Impact),里面也建议大家组合不同类型的图表。

【Nadieh】 没错,就是这样。我利用树形地图的方法来获取每组卫星的预定区域(用 x、y 坐标和宽度、高度来描述)。然后,在每个矩形区域内用力导向图的布局来进行模拟,以便对所有的圆进行定位,确保它们不会相互重叠。想要知道树状地图的每个方框的合理大小,需要用每个圆的表面积(与卫星重量成比例)与一个转换系数相加,有时还需要手动定义一些“神秘数值”(译注:magic number,意指程序中出现的没有任何注解或标明出处的数字),要么这儿改改,要么那儿调调。

你说得很对,能够创造性地使用 D3 也是我最喜欢它的原因之一!

代表卫星的圆圈根据树状地图中的控制区域和轨道类型分组,再利用 D3 的力导向布局计算它们的确切位置

代表卫星的圆圈根据树状地图中的控制区域和轨道类型分组,再利用 D3 的力导向布局计算它们的确切位置


【问】关于用 D3 为纸媒等印刷媒介生成静态可视化作品,您能再分享一下这方面的看法吗?我认为我们在这类问题上的讨论还远远不够!

【Nadieh】 我喜欢创建静态视觉效果,在创作过程中我也几乎一直在用 D3.js。对于印刷版视觉效果的创作,有一点很重要,那就是或许应该用 SVG 来完成创作,而不是使用 HTML5 的 canvas 画布。这样,杂志编辑们拿在手里的就是一个可以自由缩放大小的矢量文件。此外,字体和标题这些内容也可以进行调整(比如更换字体)和润色(比如修改文案措辞)。如果将浏览器中的视觉效果带入矢量编辑器,那么绝大部分样式都会被复制过来(我发现 Illustrator 在复制 CSS 样式与设置方面做得最好)。

【问】您与 Shirley Wu 合作完成的项目和《数据草图》一书(Data Sketches,由 A K Peters 出版社于 2021 年出版),启发了我们中的许多人,让我们在数据的处理方面更有创造力。您对初涉该领域的新人有什么建议吗?

【Nadieh】 听到这本书能带给大家启发和灵感,我感到无比欣慰。回想起来还有些奇怪,当初我和 Shirley 开始编著《数据草图》时,曾一度以为它可能是个只有我们和一些亲密的朋友才会去欣赏的愚蠢项目(silly project)呢。

至于建议,主要有两方面。一个是创作(to create)。尽可能多地去创作可视化作品。每创作一个新的作品,你都会学到新的东西(有时甚至是在不知不觉中);遇到新的问题或陷阱(pitfalls),要想出新的独具创意的解决方案来克服它们。当我回顾自己在这条道路上的旅程以及沿途创作的可视化作品时,都会清楚地看到自己是如何在编码和创意方面变得更加自信。这些经历和收获又进一步对我的创作产生积极的影响。

第二个建议,是尝试钻研你真正感兴趣的数据和主题,即便这些数据不是现成的,而是需要(手工)收集的。对自己真正感兴趣的主题进行数据分析,即使遇到技术上或设计上的困难,也会更容易坚持下去。这一点你也可以在《数据草图》一书中得到印证。在数据方面,我们从来不去选那条好走的路,而是一直尝试让兴趣来引导我们。几乎在所有情况下,数据都会不知不觉地出现在某个地方。

2.7 本章小结

  • D3 项目要有一个 Web 服务器才能正常运行。利用 VS Code 的 Live Server 扩展,可以简单快速地在本地开发环境中搭建一个 Web 服务器。
  • 有两种方法将 D3 库加载到项目中:一是在 index.html 中添加 script 标签;二是使用 NPM 模块引入 D3 库。为简单起见,本书前几章使用 script 标签的方法。
  • D3 既可以完整加载整个库,也可以按需加载必要的 D3 模块,从而提高项目性能。
  • 通过 script 标记加载文件和库时,script 标签生效的顺序与浏览器读取脚本的顺序相同。也就是说,引入 D3 的 script 标签,必须放到使用 D3 的 JavaScript 文件所对应的 script 标签前面。否则,浏览器将无法访问 JavaScript 文件中的 D3 方法而导致报错。
  • D3 使用 d3.select()d3.selectAll() 方法从 DOM 中选择元素。前者只返回第一个元素,而后者返回与其选择器匹配的所有 DOM 元素。
  • 作为参数传给 select()selectAll() 方法的字符串选择器,与 CSS 中的选择器相同,均使用标签名、类名、ID 或这些名称的组合来标识 DOM 元素。
  • append() 方法可以将新增元素添加为该选择集的最后一个子元素。
  • attr() 方法用于添加或修改元素的 attribute 属性。它接受两个参数:属性名称与属性值。
  • style() 方法可以设置和修改 DOM 元素的 style 属性(attribute),也需要传两个参数:样式的 property 属性名与属性值。
  • style() 方法可以设置行内样式,并覆盖通过外部 CSS 样式表及 attribute 视觉属性设置的样式。

相关文章:

【D3.js in Action 3 精译_020】2.6 用 D3 设置与修改元素样式 + 名人专访(Nadieh Bremer)+ 2.7 本章小结

当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介(已完结) 1.1 何为 D3.js?1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践(上)1.3 数据可视化最佳实践(下)1.4 本章小结 第二章…...

GIT命令学习 二

📑打牌 : da pai ge的个人主页 🌤️个人专栏 : da pai ge的博客专栏 ☁️宝剑锋从磨砺出,梅花香自苦寒来 ☁️运维工程师的职责:监…...

LeetCode 150, 112, 130

文章目录 150. 逆波兰表达式求值题目链接标签思路代码 112. 路径总和题目链接标签思路代码 130. 被围绕的区域题目链接标签思路代码 150. 逆波兰表达式求值 题目链接 150. 逆波兰表达式求值 标签 栈 数组 数学 思路 本题很像 JVM 中的 操作数栈,当写出以下三行…...

c++应用网络编程之五Windows常用的网络IO模型

一、Windows的网络编程 其实对开发者而言,只有Windows和其它平台。做为一种普遍流行的图形OS,其一定会与类Linux的编程有着明显的区别,这点当然也会体现在网络编程上。Windows有着自己一套相对独立的上层Socket编程模型或者说框架&#xff0…...

PostgreSQL 中如何解决因大量并发删除和插入操作导致的索引抖动?

🍅关注博主🎗️ 带你畅游技术世界,不错过每一次成长机会!📚领书:PostgreSQL 入门到精通.pdf 文章目录 PostgreSQL 中如何解决因大量并发删除和插入操作导致的索引抖动一、理解索引抖动二、索引抖动的影响三…...

鑫创SSS1700USB音频桥芯片USB转IIS芯片

鑫创SSS1700支持IIC初始外部编(EEPROM选项),两线串行总线(I2C总线)用于外部MCU控制整个EEPROM空间可以通过MCU访问用于主机控制同步的USB HID外部串行EEPROM(24C02~24C16)接口,用于客户特定的USB视频、PID、…...

计算机视觉发展历程

文章目录 前言一、发展历程1)、萌芽期(1960s-1970s)2)、基础发展期(1980s)3)、系统开发期(1990s-2000s)4)、深度学习兴起期(2010s)5&a…...

从安装Node到TypeScript到VsCode的配置教程

从安装Node到TypeScript到VsCode的配置教程 1.下载Node安装包, 链接 2.双击安装包,选择安装路径,如下: 3.一直点击下一步,直至安装结束即可: 这个时候,node会默认配置好环境变量,并且…...

Jackson详解

文章目录 一、Jackson介绍二、基础序列化和反序列化1、快速入门2、序列化API3、反序列化API4、常用配置 三、常用注解1、JsonProperty2、JsonAlias3、JsonIgnore4、JsonIgnoreProperties5、JsonFormat6、JsonPropertyOrder 四、高级特性1、处理泛型1.1、反序列化List泛型1.2、反…...

【算法】字符串

快乐的流畅:个人主页 个人专栏:《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火,在为久候之人燃烧! 文章目录 引言一、最长公共前缀二、最长回文子串三、二进制求和四、字符串相乘 引言 字符串题,大多数是模…...

Python酷库之旅-第三方库Pandas(037)

目录 一、用法精讲 116、pandas.Series.div方法 116-1、语法 116-2、参数 116-3、功能 116-4、返回值 116-5、说明 116-6、用法 116-6-1、数据准备 116-6-2、代码示例 116-6-3、结果输出 117、pandas.Series.truediv方法 117-1、语法 117-2、参数 117-3、功能 …...

iOS 左滑返回事件的控制

0x00 视图结构 1-根视图 1.1-控制器A 1.1.1-控制器B 1.1.1.1-控制器C 0x01 控制 通过设置 self.navigationController.interactivePopGestureRecognizer.enabled 为 YES 或 NO 来控制当面界面,是否能左滑返回 在 控制器B 的生命周期方法内,设置属性 s…...

= null 和 is null;SQL中关于NULL处理的4个陷阱;三值逻辑

一、概述 1、NULL参与的所有的比较和算术运算符(>,,<,<>,<,>,,-,*,/) 结果为unknown&#xff1b; 2、unknown的逻辑运算(AND、OR、NOT&#xff09;遵循三值运算的真值表&#xff1b; 3、如果运算结果直接返回用户&#xff0c;使用NULL来标识unknown 4、如…...

拖拽上传(预览图片)

需求 点击上传图片&#xff0c;或直接拖拽图片到红色方框里面也可上传图片&#xff0c;上传后预览图片 效果 实现 <!DOCTYPE html> <html lang"zh-cn"><head><meta charset"UTF-8"><meta name"viewport" content&…...

Oracle 12c新特性 In-Memory Column Store

Oracle 12c引入了一项重要的特性——In-Memory Column Store&#xff08;简称IM或In-Memory&#xff09;&#xff0c;这一特性极大地提升了数据库在处理分析型查询时的性能。以下是关于Oracle 12c In-Memory特性的详细介绍&#xff1a; 一、基本概念 In-Memory Column Store&…...

【数据结构】二叉树———Lesson2

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…...

mongodb数据导出与导入

一、先去检查mongodump mongodump --version 如果报 mongodump version: built-without-version-string 或者其他的较老的版本&#xff0c;直接去下载最新的【传送门】 【以Ubuntu18.04为例】 安装工具 假设你下载的是 .tgz 文件&#xff08;适用于 Linux 系统&#xff09;&am…...

电路学习——经典运放电路之滞回比较器(施密特触发器)(2024.07.18)

参考链接1: 电子设计教程29&#xff1a;滞回比较器&#xff08;施密特触发器&#xff09; 参考链接2: 滞回比较器电路详细分析 参考链接3: 比较器精髓&#xff1a;施密特触发器&#xff0c;正反馈的妙用 参考链接4: 比较器反馈电阻选多大&#xff1f;理解滞后效应&#xff0c;轻…...

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker)

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker) 本文档详细介绍了在 Ubuntu Server 22.04 上使用 Docker 安装和配置 NVIDIA Container Toolkit 的过程。 概述 NVIDIA 容器工具包使用户能够构建和运行 GPU 加速容器。即可以在容器中使用NVIDIA显卡。 架构图如…...

JavaWeb day01-HTML入门

Web前端 课程安排 HTML、CSS简介 HTML快速入门 实现标题排版 新闻标题样式...

驱动框架——CMSIS第一部分 RTE驱动框架介绍

一、介绍CMISIS 什么是CMSIS&#xff08;cortex microcontrol software interface standard一种软件标准接口&#xff09;&#xff0c;官网地址&#xff1a;https://arm-software.github.io/CMSIS_6/latest/General/index.html 包含的core、driver、RTOS、dsp、nn等部分&…...

Debezium日常分享系列之:Debezium2.7版本PostgreSQL数据库连接器

Debezium日常分享系列之:Debezium2.7版本PostgreSQL数据库连接器 一、概述二、连接器的工作原理安全快照初始快照的默认工作流程行为临时快照触发临时增量快照触发临时阻塞快照增量快照增量快照流程Debezium 如何解决具有相同主键的记录之间的冲突快照窗口触发增量快照具有附加…...

保障信息系统安全保护等级调整期间的安全性

保障信息系统安全保护等级调整期间的安全性&#xff1a; 策略与实践 在当今数字化时代&#xff0c;信息系统已成为企业和组织运营的核心支撑。为了适应不断变化的业务需求和安全威胁环境&#xff0c;信息系统安全保护等级的调整成为必要之举。然而&#xff0c;这一调整过程可能…...

实战:shell编程之全量命令练习

概叙 槽点~~~~~~~&#xff01; 往期shell相关文章回顾&#xff0c;有兴趣的可以自行阅读和练习。 科普文&#xff1a;一文搞懂Vim-CSDN博客 科普文&#xff1a;jvm笔记-CSDN博客 科普文&#xff1a;一天学会shell编程-CSDN博客 科普文&#xff1a;Linux服务器巡检小结_lin…...

在 CentOS 7 上编译安装 Python 3.11

安装必要的依赖 首先&#xff0c;你需要安装一些开发工具和库&#xff0c;以便编译 Python 和 OpenSSL&#xff1a; yum -y groupinstall "Development tools" yum install -y wget gcc-c pcre pcre-devel zlib zlib-devel libffi-devel zlib1g-dev openssl-devel …...

Qt 4.8.7 + MSVC 中文乱码问题深入分析

此问题很常见&#xff0c;然而网上关于此问题的分析大多不够深刻&#xff0c;甚至有错误&#xff1b;加之Qt5又更改了一些编码策略&#xff0c;而很多文章并未提及版本问题&#xff0c;或是就算提了&#xff0c;读者也不重视。这些因素很容易让读者产生误导。今日我彻底研究透了…...

IDEA的常见代码模板的使用

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …...

arcgis怎么选取某个指定区域地方的数据,比如从全国乡镇数据选取长沙市乡镇数据

一共5个步骤&#xff0c;没一句废话&#xff0c;耐心看完。看完你就会在任何软件选取指定范围的数据了。 一、如图&#xff0c;先将数据加载到arcgis里面&#xff0c;我们要选取里面长沙市的范围数据。 二、选取长沙市的语句 “市” like ‘长沙%’ 切记&#xff0c;切记&…...

二、链表(1)

203.移除链表元素 创建一个虚拟哨兵头节点&#xff0c;就不用考虑原本头结点要不要删除 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def remove…...

KAFKA搭建教程

KAFKA搭建教程 期待您的关注 KAFKA学习笔记 帮助更多人 目录 KAFKA搭建教程 1.下载Kafka并解压 2.添加环境变量 3.修改 server.properties 文件 4.将kafka复制到其它节点 5.修改node1、node2节点的broker.id 6.将master的环境变量同步到node1、 node2 7.启动zookeeper…...

淄博网站制作设计定制/企业推广公司

JavaFX教程 - JavaFX按钮当用户单击按钮时&#xff0c;JavaFX Button类可以触发事件。Button类扩展标记的类&#xff0c;它可以显示文本&#xff0c;图像&#xff0c;或两者兼而有之。以下代码显示了如何向Button添加单击操作侦听器。import javafx.application.Application;im…...

做程序题的国外网站/营销型网站建设实训总结

1、django是怎么用的&#xff1f;具体的呢&#xff1f; 2、能自己写前端代码吗&#xff1f;前端的框架呢&#xff1f; 3、支付宝/微信支付实现&#xff0c;是自己看的接口文档吗&#xff1f;能看懂开发文档吗&#xff1f; 4、你之前做的项目中&#xff0c;最复杂的查询是&#…...

四川城乡建设官方网站/关键词点击价格查询

课程目标&#xff1a; ① 在Servlet中懂得ServletContext HttpSession 以及HttpServletRequest之间的关系 ② 懂得怎样使用它们 概念介绍&#xff1a; 1. [共同点]不管对象的作用域怎样&#xff0c;共享变量和获得变量的 方法都是一致的 –setAttribute(“varName”,obj); –ge…...

广州网站建设广州网络推广公司/百度识图网站

上次给大家介绍了 Python 如何操作 Excel &#xff0c;是不是感觉还挺有趣的&#xff0c;今天为大家再介绍下&#xff0c;用 Python 如何操作 Word &#xff0c;这个可能跟数据处理关系不大&#xff0c;用的也不多&#xff0c;不过可以先了解下都能实现什么功能&#xff0c;以备…...

做网站用python好吗/抖音视频seo霸屏

一般来说有这样的需求&#xff0c;我已经有了一个图片元素&#xff0c;在这个元素的周围会有一个动态显示的对象&#xff0c;我要去做一个点击或者是hover又或者是单纯把这个对象图片save到本地&#xff0c;留做下个页面点击的对象&#xff0c;在这种情况下就可以用到sikuli来解…...

张家港网站哪家做的好/电商网站设计论文

一、ACL介绍 权限控制&#xff08;ACL&#xff09;主要为RocketMQ提供Topic资源级别的用户访问控制。 用户在使用RocketMQ权限控制时&#xff0c;可以在Client客户端通过 RPCHook注入AccessKey和SecretKey签名&#xff1b;同时&#xff0c;将对应的权限控制属性&#xff08;包…...