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

【D3.js in Action 3 精译】1.2.2 可缩放矢量图形（二）

news 文章来源：https://blog.csdn.net/frgod/article/details/140078288 2024/7/6 18:38:38

当前内容所在位置

  • 第一部分 D3.js 基础知识
    • 第一章 D3.js 简介
      • 1.1 何为 D3.js？
      • 1.2 D3 生态系统——入门须知
        • 1.2.1 HTML 与 DOM
        • 1.2.2 SVG - 可缩放矢量图形 ✔️
          • 第一部分
          • 【第二部分】✔️
          • 第三部分（精译中 ⏳）
        • 1.2.3 Canvas 与 WebGL（待翻译）
        • 1.2.4 CSS（待翻译）
        • 1.2.5 JavaScript（待翻译）
        • 1.2.6 Node 与 JavaScript 框架（待翻译）
        • 1.2.7 Observable 记事本（待翻译）

译注
（接 1.2.2 小节（一））
……正如您看到的那样，viewBox 属性由四个属性值组成。前两个数值指定了 viewBox 的坐标系原点（x 和 y）。本书将统一使用 0 0，知道这些值可以调整 SVG 容器在屏幕的可见部分还是很有帮助的。viewBox 后两个数值分别指定了宽度（width）和高度（height）。它们定义了 SVG 的宽高比，并确保它能完美适应任何容器并作相应缩放而不致失真。

（……而不致失真。）这里的关键是让 SVG 的尺寸与容器相适应。此时 SVG 所在容器为 <body> 元素，而 <body> 的尺寸又常常与浏览器视口（viewport）相适应。如果视口变得非常大，SVG 也会相应变大。通常，SVG 需要一个最大宽度，以免宽度超过页面上的其他内容。因此，SVG 需要放进一个 div 里面，并让该 div 的宽度为 100%、最大宽度为 1200px。为简便起见，我们将这些样式设为行内样式；实际项目中，它们都应该来自某个 CSS 文件。注意，为了让 SVG 水平居中，还多加了一个值为 0 auto 的外边距：

<div style="width:100%; max-width:1200px; margin:0 auto;"><svg viewBox="0 0 900 300" style="border:1px solid black;"> ... </svg>
</div>

改好后，再次调整浏览器大小，看看 SVG 是否能在保持最大宽度的情况下优雅适应任意屏幕大小。该方案有助于将 D3 可视化模块注入到响应式网页中，本书后续都将采用该方案进行演示。

2 SVG 的坐标系

实现 SVG 的响应式设计后，接下来需要重点考虑 SVG 图形在容器内的定位问题。SVG 容器就像一个空白画布，我们可以在上面绘制矢量图形。矢量图形是根据基本几何原理定义的，并相对于 SVG 容器的坐标系进行定位。

SVG 坐标系类似于直角坐标系，其二维平面通过两个相互垂直的轴来定位元素，即 x 轴和 y 轴；这两个轴的起点均为 SVG 容器的 左上角，如图 1.11 所示。y 轴的正方向为 从上到下，记住它可以少走很多弯路。

图 1.11 SVG 容器坐标系与元素位置图 1.11 SVG 容器坐标系与元素位置

要在 SVG 容器内定位一个元素，可以从左上角的原点开始向右移动。这样就得到了元素的水平位置（即 x）；垂直位置（即 y）则从顶部开始向下移动。这些位置信息均由 SVG 图形的呈现属性（presentational attributes）来定义。

下面来看看构建 D3 项目常见的 SVG 图形及其主要的呈现属性。我们的目标并不是编写一份涵盖所有 SVG 图形及其功能特性的全方位指南，而是希望这些基础知识不会在后续的 D3 学习中拖您后腿。

数据可视化小知识：几何基元（Geometric primitives）

出色的艺术家可以用矢量图形来绘制任何事物，但您可能是带着更实际的目标来学习 D3 的。从这个角度来看，理解几何基元（也称图形基元，graphical primitives）的概念至关重要。几何基元是一些简单的形状，如点、线、圆和矩形。这些图形可以组合成更复杂的图形，尤其便于直观地展示信息。

几何基元对于理解现实世界中复杂的信息可视化也很有用。比如本书第 11 章要构建的树形布局，在您意识到它们也不过是一些圆和线时，也就不会那么令人生畏了；当您把交互式时间线看作是矩形和点的集合时，它们就更容易理解和创建了；即使是主要以多边形、点和线的形式出现的地理数据，如果将其分解为最基本的图形结构，也就不会那么令人困惑了。

3 直线

直线元素可能是所有 SVG 图形中最简单的。它需要两个点的位置信息作属性值，并在它们之间绘制出一条直线。回到 index.html 示例文件，在 SVG 容器内添加一个 <line /> 元素，并令其 x1 和 y1 属性分别为 50 和 45。也就是说，该直线的起点位于 SVG 坐标系的 (50, 45)。如果从 SVG 容器的左上角开始，右移 50px、下移 45px，就会到达该起点；同理，利用属性 x2 和 y2 可将该直线的终点坐标设为 (140, 225)，如图 1.12 所示。

<svg><line x1="50" y1="45" x2="140" y2="225" />
</svg>

图 1.12 在 SVG 容器坐标系中定位直线元素图 1.12 在 SVG 容器坐标系中定位直线元素

如果保存并重新加载项目，会发现直线不可见——要让它可见，还需要设置其 stroke 属性（attribute）。stroke 用于控制直线段的描边颜色，其值与 CSS 的 color 属性（property）类似；该取值可以是一个颜色名称（black、blue …）、一个 RGB 颜色值（rgb(255,0,0)）或一个十六进制值（#808080）。给直线段添加一个 stroke 描边属性，并选择合适的颜色（示例为黑色），应该就能显示了：

<line x1="50" y1="45" x2="140" y2="225" stroke="black" />

要设置线条宽度，使用 stroke-width 属性。该属性可接受一个绝对数（转换为像素）或一个相对值（%）。例如下面一行代码，直线的 stroke-width 为 3px。如果未声明 stroke-width ，浏览器将默认取 1px。

<line x1="50" y1="45" x2="140" y2="225" stroke="black" stroke-width="3" />

打开浏览器的检查工具（Inspect），找到 SVG 节点及其包含的直线。双击其中一个属性并修改它的值，观察新的属性值对直线起点或终点的影响。再尝试不同的值，以确认您充分理解了属性 x1、y1、x2 及 y2 对直线位置和长度的影响。

接着，令 x1 属性值为 -20，如图 1.13 所示：

图 1.13 直线在 SVG 容器外的部分被隐藏图 1.13 直线在 SVG 容器外的部分被隐藏

看到直线的起点消失了吗？ 在 SVG 中，任何位于 viewBox 之外的形状（或形状的一部分）在屏幕上都是不可见的。 此时该元素仍然在 DOM 中，并且可以访问和操作。当 SVG 元素不可见，而您又不清楚原因时，则需要首先检查该元素是否在 SVG 的 viewBox 之外！请牢牢记住，您可以随时通过开发工具查看 DOM 来找到它。前面讲过，在检查工具中只要将鼠标放到该元素上，就算它在 SVG 的 viewBox 之外，也会在视口中高亮显示。

注意

大多数 SVG 元素只需要一个自闭合标签即可（如使用 <line /> 而非 <line></line>）。与其他一些 HTML 标签一样，SVG 元素的固有结构在它们的自闭合标签内已经提供了所有必要的信息；但文本元素属于例外——其文本须放到开闭标签之间。

4 矩形

矩形元素 <rect />，顾名思义，会在屏幕上画出一个矩形。<rect /> 元素需要四个属性（attributes）才能正常显示。如图 1.14 所示，属性 x 和 y 声明了矩形左上角的位置；属性 width 和 height 分别控制其宽度和高度。在 SVG 容器中添加以下 <rect /> 元素及其属性：

<rect x="260" y="25" width="120" height="60"  fill="#6ba5d7" />

示例中，矩形的左上角位于 SVG 容器原点的右侧 260px ，下方 25px；该矩形宽 120px ，高 60px。与其他定位属性一样，这些属性值也可以用百分比来进行设置。例如将 width 设置为 50%，则该矩形将占据 SVG 容器宽度的一半。

图 1.14 在 SVG 坐标系中定位和调整矩形尺寸图 1.14 在 SVG 坐标系中定位和调整矩形尺寸

您或许注意到了，示例中的矩形被填充成了黑色。默认情况下，浏览器会将大多数 SVG 图形填充为黑色。要修改默认的填充色，可以设置元素的 fill 属性，令其值为任意 CSS 颜色值即可；要给矩形添加边框，则可以添加 stroke 属性。图 1.15 展示了几个例子。注意，如果不声明 stroke 属性，则矩形四周不会描边。此外，在最后一个示例矩形中，属性 fill-opacity 和 stroke-opacity 可分别令 fill 和 stroke 属性变为半透明效果。与 CSS 一样，不透明程度（opacity）可设为绝对值（介于 0 和 1 之间）或百分比（30%）；与填充和描边相关的所有属性也都可以通过 CSS 文件进行设置或修改。

图 1.15 应用于矩形 SVG 图形的不同样式属性图 1.15 应用于矩形 SVG 图形的不同样式属性

如果想绘制带圆角的矩形，只需添加 rx 和 ry 属性即可，分别表示水平与垂直角半径。这些属性接受绝对值（像素）和相对值（百分比）。例如，下面矩形的每个角的半径都是 20px。将该矩形添加到示例中：

<rect x="260" y="100" width="120" height="60" rx="20" ry="20"  fill="#6ba5d7" />

讲到这您可能会问：SVG 中有没有专门画正方形的元素呢？答案是不需要——只要让 <rect /> 元素 width 和 height 属性相同就行了。例如下面的 <rect /> 元素，最终将画出一个 60px × 60px 的正方形。在示例页中添加以下内容：

<rect x="260" y="175" width="60" height="60"  fill="transparent" stroke="#6ba5d7" />

作为参考，现在 SVG 画廊里有三种矩形：经典矩形、圆角矩形以及正方形。为了增添趣味性，先将颜色统一设为 #6ba5d7 ，再来玩玩它们的 stroke 和 fill 属性。注意，正方形上只有描边（stroke）是可见的，因为其 fill 属性值为 transparent（为 none 也是一样的）。这些矩形应该与图 1.16 相似，除非您更改了属性值，我们也希望您改改看！

<rect x="260" y="25" width="120" height="60" fill="#6ba5d7" />
<rect x="260" y="100" width="120" height="60" rx="20" ry="20" fill="#6ba5d7" />
<rect x="260" y="175" width="60" height="60" fill="transparent" stroke="#6ba5d7" />

图 1.16 三种 SVG 矩形效果图 1.16 三种 SVG 矩形效果

关于 SVG 描边（strokes）的位置

当对齐可视化项目中的图形时，需要特别注意：SVG 图形绘制出的描边是在内外边界上平均展布的。如下图所示，已知一个 width 属性为 40px 的矩形，令 stroke-width 的值为 1，则在视觉效果上会在矩形的左右两边各增加宽度为 0.5px 的描边（而不是下意识地以为的那样在各边均增加 1px），最终实际的总宽度为 41px；若令 stroke-width 的值为 2，则左右两边各增加 1px，以此类推。

描边宽度 stroke-width 对 SVG 图形实际宽度的影响描边宽度 stroke-width 对 SVG 图形实际宽度的影响

相关文章：

【D3.js in Action 3 精译】1.2.2 可缩放矢量图形（二）

当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知 1.2.1 HTML 与 DOM1.2.2 SVG - 可缩放矢量图形 ✔️ 第一部分【第二部分】✔️第三部分&#xff08;精译中 ⏳&#xff09; 1.2.3 Canvas 与 WebGL&#x…...

编程日记 2024/6/30 15:30:45

Java中的Monad设计模式及其实现

Java中的Monad设计模式及其实现 在函数式编程中&#xff0c;Monad是一种重要的设计模式&#xff0c;用于处理包含隐含计算信息&#xff08;如计算顺序、环境、状态、错误处理等&#xff09;的计算。Monad提供了一种结构&#xff0c;使得可以将计算链式连接起来&#xff0c;每一…...

编程日记 2024/6/30 15:27:42

Dahlia Hart: Stylized Casual Character（休闲角色模型）

此包包含两个发型和两个服装&#xff0c;每个都有多种颜色选择。每个发型都适合与物理资源一起使用&#xff0c;并包含各种表情和音素混合形状。 下载&#xff1a;​​Unity资源商店链接资源下载链接 效果图&#xff1a;...

编程日记 2024/6/30 15:26:40

vector容器

以下是关于vector容器的总结 1、构造容器 2、容器赋值 3、获取容量capacity和大小size 4、插入和删除 5、数据存取 6、互换容器和预留空间 #include <iostream> #include <vector>using namespace std; // vector数据结构和数组非常相似&#xff0c;也称为单端数组…...

编程日记 2024/6/30 15:25:39

二进制常用知识整理＜java＞

1、进制转换&#xff1a; int转二进制&#xff1a; public static void main(String[] args) {int a 0b100;//0b表示后面的为二进制表示&#xff0c;0开始表示八进制System.out.println(a);System.out.println(Integer.toBinaryString(a));System.out.println(Integer.toStr…...

编程日记 2024/6/30 15:23:36

基于Docker的淘客返利平台部署

基于Docker的淘客返利平台部署 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在本文中&#xff0c;我们将探讨如何利用Docker技术来部署一个淘客返利平台。Doc…...

编程日记 2024/6/30 15:22:34

【涵子来信科技潮流】——WWDC24回顾与暑假更新说明

期末大关&#xff0c;即将来袭。在期末之前&#xff0c;我想发一篇文章&#xff0c;介绍有关WWDC24的内容和暑假中更新的说明。本篇文章仅为个人看法和分享&#xff0c;如需了解更多详细内容&#xff0c;请通过官方渠道或者巨佬文章进行进一步了解。 OK, Lets go. 一、WWDC24 …...

编程日记 2024/6/30 15:19:32

重温react-08(createContext使用方式)

react中的createContext使用方式 简介一下&#xff0c;就是组件之间可以互相通信的比较好用的传值方式&#xff0c;话不多说直接上代码。 以下介绍的是类组件中的方式&#xff0c;在函数组件中不是如此使用的。 定义一个通用的方法 import { createContext } from "react…...

编程日记 2024/6/30 15:17:29

LInux后台运行程序

测试c代码 #include <stdio.h> #include <unistd.h> int main() {for (int i;; i) {printf("b数值 %d\n", i);fflush(stdout);sleep(3);} }使用CtrlZ可以将当前正在运行的程序放到后台并暂停它。如果你想要继续这个暂停的程序&#xff0c;可以使用fg命令…...

编程日记 2024/6/30 15:13:25

DEBOPIE框架：打造最好的ChatGPT交易机器人

本文介绍了如何利用 DEBOPIE 框架并基于 ChatGPT 创建高效交易机器人&#xff0c;并强调了在使用 AI 辅助交易时需要注意的限制以及操作步骤。原文: Build the Best ChatGPT Trading Bots with my “DEBOPIE” Framework 如今有大量文章介绍如何通过 ChatGPT 帮助决定如何以及在…...

编程日记 2024/6/30 15:11:23

C++ Thead多线程 condition_variable 与其使用场景---C++11多线程快速学习

std::condition_variable 的步骤如下&#xff1a; 创建一个 std::condition_variable 对象。 创建一个互斥锁 std::mutex 对象&#xff0c;用来保护共享资源的访问。 在需要等待条件变量的地方 使用 std::unique_lock<std::mutex> 对象锁定互斥锁 并调用 std::conditio…...

编程日记 2024/6/30 15:09:20

什么是前端开发？

前端开发是什么一种工作&#xff1f;这里以修房子举例&#xff1a; jquery根据数据去生成对应的html代码。首先得有一个html代码的“房屋构造”&#xff0c;然后根据数据去填充“房屋构造”的“血肉”&#xff0c;最后JavaScript通过事件等方法给一砖一瓦修好的房屋添加“灵魂…...

编程日记 2024/6/30 15:08:19

大数据面试题之Spark(1)

目录 Spark的任务执行流程 Spark的运行流程 Spark的作业运行流程是怎么样的? Spark的特点 Spark源码中的任务调度 Spark作业调度 Spark的架构 Spark的使用场景 Spark on standalone模型、YARN架构模型(画架构图) Spark的yarn-cluster涉及的参数有哪些? Spark提交jo…...

编程日记 2024/6/30 15:05:16

Spring Boot 和 Spring Framework 的区别是什么?

SpringFramework和SpringBoot都是为了解决在Java开发过程中遇到的各种问题而出现的。了解它们之间的差异&#xff0c;能够更好的帮助我们使用它们。 SpringFramework SpringFramework是一个开源的Java平台&#xff0c;它提供了一种全面的架构和基础设施来支持Java应用程序的开…...

编程日记 2024/6/30 15:04:15

JVM原理（四）：JVM垃圾收集算法与分代收集理论

从如何判定消亡的角度出发&#xff0c;垃圾收集算法可以划分为“引用计数式垃圾收集”和“追踪式垃圾收集”两大类。 本文主要介绍的是追踪式垃圾收集。 1. 分代收集理论 当代垃圾收集器大多遵循“分代收集”的理论进行设计&#xff0c;它建立在两个假说之上&#xff1a; 弱分…...

编程日记 2024/6/30 15:02:13

1961 Springboot自习室预约系统idea开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 自习室预约管理系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库…...

编程日记 2024/6/30 14:57:07

前端面试题（12）答案版

1. H5的新特性&#xff1f; 1) 更加语义化的标签,如<header>、<nav>、<article>等,便于网页结构的表达。 2) 新的多媒体标签,如<video>和<audio>,支持本地视频和音频的播放。 3) 本地存储API,如localStorage和sessionStorage,用于在客户端保存数…...

编程日记 2024/6/30 14:56:06

SpringMVC 域对象共享数据

文章目录 1、使用ServletAPI向request域对象共享数据2、使用ModelAndView向request域对象共享数据3、使用Model向request域对象共享数据4、使用map向request域对象共享数据5、使用ModelMap向request域对象共享数据6、Model、ModelMap、Map的关系7、向session域共享数据8、向app…...

编程日记 2024/6/30 14:55:05

每天五分钟深度学习框架pytorch：tensor向量之间常用的运算操作

本文重点 在数学中经常有加减乘除运算，在tensor中也不例外，也有类似的运算，本节课程我们将学习tensor中的运算 常见运算 加法+或者add import torch import numpy as np a=torch.rand(16,3,28,28) b=torch.rand(1,3,28,28) print(a+b) import torch import numpy as np a…...

编程日记 2024/6/30 14:54:04

【数据结构】（C语言）：栈

栈&#xff1a; 线性的集合。后进先出&#xff08;LIFO&#xff0c;last in first out&#xff09;。两个指针&#xff1a;指向栈顶和栈底。栈顶指向最后进入且第一个出去的元素。栈底指向第一个进入且最后一个出去的元素。两个操作&#xff1a;入栈&#xff08;往栈尾添加元素…...

编程日记 2024/6/30 14:51:01

c++类成员指针用法

1&#xff09;C入门级小知识&#xff0c;分享给将要学习或者正在学习C开发的同学。 2&#xff09;内容属于原创&#xff0c;若转载&#xff0c;请说明出处。 3&#xff09;提供相关问题有偿答疑和支持。 c中新增类成员指针操作&#xff0c;为了访问方便&#xff0c;他是指…...

编程日记 2024/6/30 14:50:00

[240625] Continue -- 开源 Copilot | Web-Check 网站分析工具 | Story of EOL

目录 Continue -- 开源 CopilotWeb-Check 网站分析工具Web-Check 提供全面的网站分析功能Web-Check 支持多种部署方式&#xff1a;配置选项开发环境Web-Check 使用多种数据源进行分析 Story of EOLASCII 文本中的换行符问题 Continue – 开源 Copilot 让 Continue 和 Ollama 成…...

编程日记 2024/6/30 14:46:57

【Mac】Auto Mouse Click for Mac（高效、稳定的鼠标连点器软件）软件介绍

软件介绍 Auto Mouse Click for Mac 是一款专为 macOS 平台设计的自动鼠标点击软件&#xff0c;它可以帮助用户自动化重复的鼠标点击操作&#xff0c;从而提高工作效率。以下是这款软件的主要特点和功能&#xff1a; 1.自动化点击操作&#xff1a;Auto Mouse Click 允许用户录…...

编程日记 2024/6/30 14:45:56

javaSE知识点整理总结（下）、MySQL数据库

目录 一、异常 1.常见异常类型 2.异常体系结构 3.异常处理 &#xff08;1&#xff09;finally &#xff08;2&#xff09;throws 二、JDBC 1.JDBC搭建 2.执行SQL语句两种方法 三、MySQL数据库 1.ddl 2.dml 3.dql &#xff08;1&#xff09;字符函数 &#xff08;…...

编程日记 2024/6/30 14:44:54

Perl入门学习

Perl是一种强大的脚本语言&#xff0c;以其灵活性和文本处理能力而闻名&#xff0c;常用于系统管理、Web开发、生物信息学以及数据处理等领域。以下是Perl语言入门学习的一些关键点&#xff1a; ### 1. Perl简介 - **起源与特点**&#xff1a;Perl由Larry Wall在1987年创建&am…...

编程日记 2024/6/30 14:40:51

2024年7月计划（ue5肉鸽视频完成）

试过重点放在独立游戏上&#xff0c;有个indienova独立游戏团队是全职的&#xff0c;由于他们干了几个月&#xff0c;节奏暂时跟不上&#xff0c;紧张焦虑了。五一时也有点自暴自弃了&#xff0c;实在没必要&#xff0c;按照自己的节奏走即可。精力和时间也有限&#xff0c;放在…...

编程日记 2024/6/30 14:39:50

恢复策略（上）-撤销事务（UNDO）、重做事务（REDO）

一、引言 利用前面所建立的冗余数据&#xff0c;即日志和数据库备份&#xff0c;要将数据库从一个不一致的错误状态恢复到一个一致性状态&#xff0c;还需要相关的恢复策略&#xff0c;不同DBMS的事务处理机制所采用的缓冲区管理策略可能不同&#xff0c;发生故障后的数据库不…...

编程日记 2024/6/30 14:38:48

【鸿蒙学习笔记】位置设置

官方文档&#xff1a;位置设置 目录标题 align&#xff1a;子元素的对齐方式direction&#xff1a;官方文档没懂&#xff0c;看图理解吧 align&#xff1a;子元素的对齐方式 Stack() {Text(TopStart)}.width(90%).height(50).backgroundColor(0xFFE4C4).align(Alignment.TopS…...

编程日记 2024/6/30 14:37:47

41.HOOK引擎设计原理

上一个内容&#xff1a;41.HOOK引擎设计原理 在一个游戏里通过hook来完成各种各样的功能&#xff0c;比如hook点是a、b、c&#xff0c;然后a点会有它自己所需要的hook逻辑&#xff0c;b、c也是有它们自己的hook逻辑&#xff08;hook逻辑指的是hook之后要做的事&#xff09;&am…...

编程日记 2024/6/30 14:36:46

STM32启动流程 和 map文件的作用

一&#xff0c;启动流程 1. 复位/上电 2. 根据 BOOT0/BOOT1 确定程序从哪个存储位置执行 3. 初始化 SP 及 PC 指针 将 0X08000000 位置的栈顶地址存放在 SP 指针中 将 0x08000004 位置存放的向量地址装入 PC 程序计数器 4. 初始化系统时钟 5. 初始化用户堆栈 6. 进入main函数 二…...

编程日记 2024/6/30 14:35:45

深度解析华为仓颉语言

什么是华为仓颉语言&#xff1f; 华为仓颉语言&#xff08;Huawei Cangjie Language&#xff0c;HCL&#xff09;是华为公司推出的一种新型编程语言&#xff0c;旨在解决大规模分布式系统开发中的复杂性问题。仓颉语言以高效、简洁和易用为设计目标&#xff0c;特别适用于云计…...

编程日记 2024/6/30 14:33:43

Android简介-历史、API等级与体系结构

1. Android简介 Android是一种基于Linux内核的自由及开放源代码的操作系统。最初是由安迪鲁宾(Andy Rubin)开发的一款相机操作系统。2005年8月被Google收购。2007年11月&#xff0c;Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。…...

编程日记 2024/6/30 14:32:41

SpringBoot：使用Spring Batch实现批处理任务

引言 在企业级应用中&#xff0c;批处理任务是不可或缺的一部分。它们通常用于处理大量数据&#xff0c;如数据迁移、数据清洗、生成报告等。Spring Batch是Spring框架的一部分&#xff0c;专为批处理任务设计&#xff0c;提供了简化的配置和强大的功能。本文将介绍如何使用Spr…...

编程日记 2024/6/30 14:31:40

用JQueryUI库在.net MVC中配置datepicker(时间日期控件)

原文参考&#xff1a;如何在MVC中添加jQuery Datepicker_mvc datepicker-CSDN博客 好文章被埋没了&#xff0c;可能和时间发的早有关。 1.首先我们引入JQuery和JQuery UI <!-- ... --> <link rel"stylesheet" href"https://code.jquery.com/ui/1.12…...

编程日记 2024/6/30 14:30:39

算法：链表

目录 链表的技巧和操作总结 常用技巧&#xff1a; 链表中的常用操作 题目一&#xff1a;反转一个单链表 题目二&#xff1a;链表的中间结点 题目三&#xff1a;返回倒数第k个结点 题目四&#xff1a;合并两个有序链表 题目五&#xff1a;移除链表元素 题目六&#xff…...

编程日记 2024/6/30 14:29:38

Redis基础教程（一）：redis配置

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…...

编程日记 2024/6/30 14:28:37

短视频矩阵系统：打造品牌影响力的新方式

一、短视频矩阵概念 短视频营销革命&#xff1a;一站式解决策略&#xff01;短视频矩阵系统是一款专为企业营销设计的高效工具&#xff0c;旨在通过整合和优化众多短视频平台资源&#xff0c;为企业呈现一个全面的短视频营销策略。该系统致力于协助企业以迅速且高效的方式制作…...

编程日记 2024/6/30 14:26:34

品牌推广的三个阶段与核心内容，一篇文章全掌握！

在竞争激烈的市场环境中&#xff0c;品牌推广是企业成功的关键。精心策划的推广策略能够帮助企业在消费者心中树立独特的品牌形象&#xff0c;进而促进销售增长。 作为一家手工酸奶品牌的创始人&#xff0c;目前全国也复制了100多家门店&#xff0c;我理解的品牌推广分为3个阶…...

编程日记 2024/6/30 14:25:33

队列与循环队列

目录 1. 前言&#xff1a; 2. 队列 2.1 队列的概念 2.2 队列的实现 2.3 队列的声明 2.4 队列的初始化 2.5 队列的入队 2.6 队列的出队 2.7 队列获取队头元素 2.8 队列获取队尾元素 2.9 队列获取有效数据个数 2.10 队列判断是否为空 2.11 打印队列 2.12 销毁队列 …...

编程日记 2024/6/30 14:24:32

python基础问题记录

文章目录 前言一、python中类的注意点二、模块与包1. 模块2. 包 总结 前言 本专栏主要记录python中一些语法问题。 一、python中类的注意点 类属性&#xff1a;在类中定义的属性 在类中直接写明的变量是类属性&#xff0c;属于公共属性。 访问&#xff1a;类属性可以通过类或…...

编程日记 2024/6/30 14:23:31

Qt之饼图(Pie Graph)

[TOC](Qt之饼图(Pie Graph)) 饼图名为Pie Graph&#xff0c;用于显示一个数据系列中各项的大小与各项总和的比例。本文基于QtCharts实现饼图的显示。 1.实现过程 1.1环境配置 &#xff08;1&#xff09;首先想要使用QtCharts模块&#xff0c;需要在安装qt时选择勾选安装QtCha…...

编程日记 2024/6/30 14:20:28

Java项目Git提交规范

在Java项目中&#xff0c;遵循良好的Git提交规范有助于提高代码的可维护性、可读性和团队协作效率。以下是一些常见的Git提交规范建议&#xff1a; 文章目录 提交信息格式提交信息示例提交频率分支管理代码审查工具和自动化提交前检查清单 提交信息格式 提交类型&#xff1a;使…...

编程日记 2024/6/30 14:18:26

flink-触发器Trigger和移除器Evictor

窗口原理与机制 图片链接&#xff1a;https://blog.csdn.net/qq_35590459/article/details/132177154 数据流进入算子前&#xff0c;被提交给WindowAssigner&#xff0c;决定元素被放到哪个或哪些窗口&#xff0c;同时可能会创建新窗口或者合并旧的窗口。每一个窗口都拥有一个…...

编程日记 2024/6/30 14:17:25

【力扣 28】找出字符串中第一个匹配项的下标 C++题解（字符串匹配）

给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例 1&#xff1a; 输入&#xff1a;haystack “s…...

编程日记 2024/6/30 14:15:23

软件构造 | Design Patterns for Reuse and Maintainability

Design Patterns for Reuse and Maintainability &#xff08;面向可复用性和可维护性的设计模式&#xff09; Open-Closed Principle (OCP) ——对扩展的开放&#xff0c;对修改已有代码的封 Why reusable design patterns A design… …enables flexibility to change …...

编程日记 2024/6/30 14:14:22

Python数据分析-股票分析和可视化（深证指数）

一、内容简介 股市指数作为衡量股市整体表现的重要工具&#xff0c;不仅反映了市场的即时状态&#xff0c;也提供了经济健康状况的关键信号。在全球经济体系中&#xff0c;股市指数被广泛用于预测经济活动&#xff0c;评估投资环境&#xff0c;以及制定财政和货币政策。在中国…...

编程日记 2024/6/30 14:13:21

Linux如何安装openjdk1.8

文章目录 Centosyum安装jdk和JRE配置全局环境变量验证ubuntu使用APT（适用于Ubuntu 16.04及以上版本）使用PPA（可选，适用于需要特定版本或旧版Ubuntu）Centos yum安装jdk和JRE yum install java-1.8.0-openjdk-devel.x86_64 安装后的目录 配置全局环境变量 vim /etc/pr…...

编程日记 2024/6/30 14:09:17

【LLVM】LTO学习

看这篇文章&#xff0c;文中的代码都是错的&#xff0c;给出的命令行也是错的。 真不如参考文献中也是华为的外国员工写的PPT。 但是&#xff0c;上述的文件中的指令也存在报错&#xff0c;还是官方文档看着舒服。...

编程日记 2024/6/30 14:07:15

事务的特性-原子性(Atomicity)、一致性(Consistency)、隔离性(Asolation)、持久性(Durability)

一、引言 1、数据库管理系统DBMS为保证定义的事务是一个逻辑工作单元&#xff0c;达到引入事务的目的&#xff0c;实现的事务机制要保证事务具有原子性、一致性、隔离性和持久性&#xff0c;事务的这四个特性也统称为事务的ACID特性 2、当事务保持了ACID特性&#xff0c;才能…...

编程日记 2024/6/30 14:05:13

redis哨兵模式（Redis Sentinel）

哨兵模式的背景 当主服务器宕机后&#xff0c;需要手动把一台从服务器切换为主服务器&#xff0c;这就需要人工干预&#xff0c;费事费力&#xff0c;还会造成一段时间内服务不可用。这不是一种推荐的方式。 为了解决单点故障和提高系统的可用性&#xff0c;需要一种自动化的监…...

编程日记 2024/6/30 14:02:10

SpringBoot原理

SpringBoot开发项目&#xff0c;为什么这么简单&#xff1f;SpringBoot帮我们做了哪些事情&#xff1f; 了解SpringBoot的底层原理是有必要的。 面试重点 spring框架中各种jar包的依赖关系&#xff08;还有各种jar包的版本适配&#xff09;、还有各种配置非常繁琐 SpringBoo…...

编程日记 2024/7/6 18:17:27

【qt】如何通过域名获得IP地址?

域名是什么呢?像www.baidu.com的baidu.com就是域名. 域名相当于是网站的门牌号. 域名可以通过 DNS 解析将其转换为对应的 IP 地址. 用我们获取IP地址的方式就可以,但是现在没有可以用另一种方法. 槽函数的实现: void MainWindow::lookupHost(const QHostInfo &hostInf…...

编程日记 2024/7/6 17:04:39

材质相关内容整理 -ThreeJs

在Three.js中&#xff0c;材质是用来定义3D对象外观的关键部分。Three.js支持多种材质文件和类型&#xff0c;每种材质都有其特定的用途和优势。下面简单整理了一下目前Three.js支持的材质文件和类型。 一、Three.js支持的材质文件类型 JPEG (.jpg) 和 PNG (.png) 用途&#x…...

编程日记 2024/7/6 14:53:15

05.C1W4.Machine Translation and Document Search

目录 OverviewWhat you’ll be able to do!Learning Objectives Transforming word vectorsOverview of TranslationTransforming vectors Align word vectorsSolving for RFrobenius normFrobenius norm squaredGradient K nearest neighborsFinding the translationNearest n…...

编程日记 2024/7/6 14:18:54

X86和ARM架构的服务器 的区别

X86和ARM架构的服务器各有其优缺点，并适用于不同的应用场景。 一、X86架构服务器的优缺点及应用场景： 优点： 1. 易于获取和成本较低：X86服务器在市场上品牌和型号众多，价格相对较低，适合中小型企业。 2. 处理能力强大：X86服务器通常具有强大的处理器性能，支持多核心…...

编程日记 2024/7/6 13:26:24

C语言初阶——实用调试技巧(新课学习)

#define _CRT_SECURE_NO_WARNINGS #include<stdio.h> strcpy 字符串拷贝 char * strcpy (char * destination, const char * source); #include<string.h>//strcpy头文件int main() { char arr1[20] { 0 };//char arr1[20] "woshishui"; ch…...

编程日记 2024/7/6 10:48:41

L3/L4产品准入和上路，9个联合体进入试点

6月4日，工业和信息化部、公安部、住房城乡建设部、交通运输部四部门联合宣布，按照《关于开展智能网联汽车准入和上路通行试点工作的通知》有关工作安排，经相关部门及专家初审和择优评审，已经确定了9个进入试点的联合体。2023年11月，上述四部门联合发布《关于开展智能网联汽…...

编程日记 2024/7/6 5:11:10

Go语言-big.Int

文章目录 Go 语言 big.Int应用场景&#xff1a;大整数位运算使用举例&#xff1a; go sdk中crypto/ecdsa 椭圆曲线生成私钥相关结构中就有使用 Go 语言 big.Int Go 语言 big.Int 参考URL: https://blog.csdn.net/wzygis/article/details/82867793 math/big 作为 Go 语言提供的…...

编程日记 2024/7/6 5:46:12

人工智能和大模型的区别

人工智能&#xff08;AI&#xff09;和大模型是两个相关但有区别的概念。理解它们之间的区别有助于更好地掌握现代科技的发展动态。 人工智能&#xff08;AI&#xff09; 人工智能&#xff08;Artificial Intelligence, AI&#xff09;是一个广义的概念&#xff0c;指的是通过…...

编程日记 2024/7/5 23:58:21

【JavaScript】ECMAS6（ES6）新特性概览（二）：解构赋值、扩展与收集、class类全面解析

&#x1f525; 个人主页&#xff1a;空白诗 &#x1f525; 热门专栏&#xff1a;【JavaScript】 文章目录 &#x1f33f; 引言五、 Destructuring Assignment - 解构赋值&#xff0c;数据提取的艺术 &#x1f3a8;&#x1f4cc; 数组解构&#x1f4cc; 对象解构&#x1f4cc; 特…...

编程日记 2024/7/6 11:13:33

总结 HTTP 协议的基本格式

一、HTTP 是什么 HTTP ( 全称为 " 超文本传输协议 ") 是一种应用非常广泛的 应用层协议 . HTTP 诞生与 1991 年 . 目前已经发展为最主流使用的一种应用层协议 . HTTP 协议目前有三个大版本: HTTP / 1 和 HTTP / 2 都是基于TCP 传输控制协议传输数据。最新版本的…...

编程日记 2024/7/5 22:49:23

element-ui 前端ui框架用法开发指南（2024-05-22）

Element&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 1、npm安装 // npm安装&#xff1a;npm install element-ui --save 能更好地和 webpack 打包工具配合使用 2、cdn在线引入 访问最新版本的资源地址 - element-uiThe CDN for element-u…...

编程日记 2024/7/6 15:43:47