交互式数据可视化－D3.js（一）

MASAILA 发布于2019-08-20 10:39 / 2673人阅读

摘要：如其中，和表示绘制区域的宽高，表示版本号。下面分别是绘制一个多边形和折线路径标签功能最丰富，以上图形都可以使用路径制作出来，用法与折线类似给出一个坐标点在坐标前添加一个英文字母，表示如何运动到此坐标点点。英文字符按照功能分为五类。

在D3中会穿插SVG 方便大家对D3对使用

SVG简介

可缩放矢量图(scalabel vector graphics)，是用于描述二维矢量图形的一种图形格式，是由W3C制订的开放标准。SVG使用XML格式来定义图形，IE8版本以后的浏览器绝大部份都支持SVG。

图形元素

使用SVG中的图形元素，可以在HTML文件中嵌入，也可以多带带写成文件来使用。如：XXX.svg

其中，width和height表示绘制区域的宽高，varsion表示版本号。需要绘制的图形都要添加到这一组SVG之间。
SVG中预定了七种形状元素：

矩形

圆形

椭圆

线段

折线

多边形

路径

这些元素表示形状的参数各有不同，但也有一些相同的属性。下面介绍这些元素的参数和示例。

矩形

矩形的参数共有6个：

x: 矩形左上角X坐标

y: 矩形右上角Y坐标

width: 矩形的宽度

height: 矩形的宽度

rx: 对于圆角矩形，指定椭圆在X方向的半径

ry: 对于圆角矩形，指定椭圆在X方向的半径

下面分别是绘制一个直角和圆角矩形:

圆形和椭圆形

圆形多产生是3个：

cx: 圆心的X坐标

cy: 圆心的Y坐标

r: 圆的半径

椭圆的参数和圆形类似，只是半径分为水平半径和垂直半径：

cx: 圆心的X坐标

cy: 圆心的Y坐标

rx: 椭圆的水平半径

ry: 椭圆的垂直半径

下面分别是绘制一个圆形和椭圆形:

线段

线段的参数是起点和终点的坐标:

x1: 起点的X坐标

y1: 起点的X坐标

x2: 终点的X坐标

y2: 终点的X坐标

绘制一个线段:

多边形和折线

多边形和折线意义都只有1个参数：

points: 一系列的坐标点

不同之处多边形将会和折线连起来折线不连。下面分别是绘制一个多边形和折线:

路径

标签功能最丰富，以上图形都可以使用路径制作出来，用法与折线类似给出一个坐标点在坐标前添加一个英文字母，表示如何运动到此坐标点点。英文字符按照功能分为五类。

移动类

M=moveto: 将画笔移动到指定的坐标

直线类

L=lineto: 绘制直线到指定坐标

H=horizontal lineto: 绘制水平直线到指定坐标

V=vertical lineto: 绘制垂直直线到指定坐标

曲线类

C=curveto: 绘制三次贝塞尔曲线经过指定的控制点到达终点坐标

弧线类

A=elliptical arc: 绘制椭圆曲线到指定坐标

闭合类

Z=closepath: 绘制一条直线连接终点和起点。用来闭合图形

路径这里只做介绍。有兴趣的可以去[MOZ]: https://developer.mozilla.org... 了解

私有云专线服务 d3.js数据可视化实战大数据可视化 d3.js d3.js数据可视化实战手册交互式数据可视化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80255.html

交互式数据可视化－D3.js（五）过渡

摘要：设置过渡属性会对每个选中的元素进行调用，并依次传入当前绑定元素的数据设置过渡样式设置样式插值过渡开始时将文本设置为值将属性按照插值进行过渡。和都是用此函数实现的在使用过渡时是对于选择集自身的元素来说的，选择集的子元素不受影响。过渡过渡效果的起始状态和目标状态都很明确，指定之后元素会从起始状态过渡为目标状态。初始化一个过渡效果，有如下几个方法：var tran = d3.transi...

张红新 2019-08-02 11:53 评论0 收藏0
交互式数据可视化－D3.js（五）过渡

摘要：设置过渡属性会对每个选中的元素进行调用，并依次传入当前绑定元素的数据设置过渡样式设置样式插值过渡开始时将文本设置为值将属性按照插值进行过渡。和都是用此函数实现的在使用过渡时是对于选择集自身的元素来说的，选择集的子元素不受影响。过渡过渡效果的起始状态和目标状态都很明确，指定之后元素会从起始状态过渡为目标状态。初始化一个过渡效果，有如下几个方法：var tran = d3.transi...

URLOS 2019-08-23 12:44 评论0 收藏0
交互式数据可视化－D3.js（二）选择集和数据

摘要：相关的函数有两个和的工作过程的方法很简单，使用的也比较少。的工作过程能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，同样能够处理。多出的元素在最后。选择集 select和selectAll类似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

leanote 2019-08-02 11:54 评论0 收藏0
交互式数据可视化－D3.js（二）选择集和数据

摘要：相关的函数有两个和的工作过程的方法很简单，使用的也比较少。的工作过程能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，同样能够处理。多出的元素在最后。选择集 select和selectAll类似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

褰辩话 2019-08-23 12:42 评论0 收藏0
交互式数据可视化－D3.js（四）形状生成器

摘要：形状生成器线段生成器使用默认的设置构造一个生成器。如果指定了则将访问器设置为指定的函数或数值并返回当前生成器。形状生成器线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器。 linePath.x() - 如果指定了 x 则将 x 访问器设置为指定的函数或数值并返回当前 line 生成器。如果没有指定 x 则返回当前 x 访问器...

Terry_Tai 2019-08-02 11:54 评论0 收藏0