做图片视频的网站有哪些问题吗,做网站界面的软件,网页制作与网站建设pdf,哈尔滨网络公司如何当前内容所在位置 第一部分 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… 当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介 1.1 何为 D3.js1.2 D3 生态系统——入门须知 1.2.1 HTML 与 DOM1.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 stylewidth:100%; max-width:1200px; margin:0 auto;svg viewBox0 0 900 300 styleborder:1px solid black; ... /svg
/div改好后再次调整浏览器大小看看 SVG 是否能在保持最大宽度的情况下优雅适应任意屏幕大小。该方案有助于将 D3 可视化模块注入到响应式网页中本书后续都将采用该方案进行演示。
2 SVG 的坐标系
实现 SVG 的响应式设计后接下来需要重点考虑 SVG 图形在容器内的定位问题。SVG 容器就像一个空白画布我们可以在上面绘制矢量图形。矢量图形是根据基本几何原理定义的并相对于 SVG 容器的坐标系进行定位。
SVG 坐标系类似于直角坐标系其二维平面通过两个相互垂直的轴来定位元素即 x 轴和 y 轴这两个轴的起点均为 SVG 容器的 左上角如图 1.11 所示。y 轴的正方向为 从上到下记住它可以少走很多弯路。
图 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 所示。
svgline x150 y145 x2140 y2225 /
/svg图 1.12 在 SVG 容器坐标系中定位直线元素
如果保存并重新加载项目会发现直线不可见——要让它可见还需要设置其 stroke 属性attribute。stroke 用于控制直线段的描边颜色其值与 CSS 的 color 属性property类似该取值可以是一个颜色名称black、blue …、一个 RGB 颜色值rgb(255,0,0)或一个十六进制值#808080。给直线段添加一个 stroke 描边属性并选择合适的颜色示例为黑色应该就能显示了
line x150 y145 x2140 y2225 strokeblack /要设置线条宽度使用 stroke-width 属性。该属性可接受一个绝对数转换为像素或一个相对值%。例如下面一行代码直线的 stroke-width 为 3px。如果未声明 stroke-width 浏览器将默认取 1px。
line x150 y145 x2140 y2225 strokeblack stroke-width3 /打开浏览器的检查工具Inspect找到 SVG 节点及其包含的直线。双击其中一个属性并修改它的值观察新的属性值对直线起点或终点的影响。再尝试不同的值以确认您充分理解了属性 x1、y1、x2 及 y2 对直线位置和长度的影响。
接着令 x1 属性值为 -20如图 1.13 所示
图 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 x260 y25 width120 height60 fill#6ba5d7 /示例中矩形的左上角位于 SVG 容器原点的右侧 260px 下方 25px该矩形宽 120px 高 60px。与其他定位属性一样这些属性值也可以用百分比来进行设置。例如将 width 设置为 50%则该矩形将占据 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 图形的不同样式属性
如果想绘制带圆角的矩形只需添加 rx 和 ry 属性即可分别表示水平与垂直角半径。这些属性接受绝对值像素和相对值百分比。例如下面矩形的每个角的半径都是 20px。将该矩形添加到示例中
rect x260 y100 width120 height60 rx20 ry20 fill#6ba5d7 /讲到这您可能会问SVG 中有没有专门画正方形的元素呢答案是不需要——只要让 rect / 元素 width 和 height 属性相同就行了。例如下面的 rect / 元素最终将画出一个 60px × 60px 的正方形。在示例页中添加以下内容
rect x260 y175 width60 height60 filltransparent stroke#6ba5d7 /作为参考现在 SVG 画廊里有三种矩形经典矩形、圆角矩形以及正方形。为了增添趣味性先将颜色统一设为 #6ba5d7 再来玩玩它们的 stroke 和 fill 属性。注意正方形上只有描边stroke是可见的因为其 fill 属性值为 transparent为 none 也是一样的。这些矩形应该与图 1.16 相似除非您更改了属性值我们也希望您改改看
rect x260 y25 width120 height60 fill#6ba5d7 /
rect x260 y100 width120 height60 rx20 ry20 fill#6ba5d7 /
rect x260 y175 width60 height60 filltransparent stroke#6ba5d7 /图 1.16 三种 SVG 矩形效果 关于 SVG 描边strokes的位置 当对齐可视化项目中的图形时需要特别注意SVG 图形绘制出的描边是在内外边界上平均展布的。如下图所示已知一个 width 属性为 40px 的矩形令 stroke-width 的值为 1则在视觉效果上会在矩形的左右两边各增加宽度为 0.5px 的描边而不是下意识地以为的那样在各边均增加 1px最终实际的总宽度为 41px若令 stroke-width 的值为 2则左右两边各增加 1px以此类推。 描边宽度 stroke-width 对 SVG 图形实际宽度的影响
