d3.js学习笔记-05(颜色、路径生成器)

最新推荐文章于 2024-06-13 10:00:45 发布
最新推荐文章于 2024-06-13 10:00:45 发布
阅读量1k 收藏 5
点赞数
分类专栏： 精通d3js d3.js 可视化 文章标签： d3.js 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40625543/article/details/108469626
版权
可视化 同时被 3 个专栏收录
14 篇文章 2 订阅
订阅专栏
d3.js
12 篇文章 1 订阅
订阅专栏
精通d3js
9 篇文章 2 订阅
订阅专栏

d3.js学习笔记-05

目录

1. 颜色

1.1 RGB

RGB色彩模式通过叠加红绿蓝三个颜色通道得到各种颜色
  • d3.rgb(r,g,b)：使用r、g、b值来创建颜色，范围都为[0,255]。
  • d3.rgb(color)：输入字符串来创建颜色，例如："#ffeeaa“或缩写"#fea"、 “red”。
  • rgb.brighter([k])：颜色变更明亮。RGB各通道的值乘以0.7^-k。如果k省略，k的值为1。只有当通道的值在30~255之间时，才会进行相应的计算。
  • rgb.darker([k])：颜色变更暗。RGB各通道的值乘以0.7^k。
  • rgb.hsl()：返回该颜色对应的HSL值。
  • rgb.toString()：以字符串形式返回该颜色值，如"#ffecaa"。
    注：brighter()、darker()、hsl()返回的是对象，不是字符串。
    在这里插入图片描述

1.2 HSL

H：亮度(Hue)；S：饱和度(Saturation)；L：明度(Lightness)
  • d3.hsl(h, s,l)：创建HSL颜色。
  • d3.hsl(color)：根据字符串来创建HSL 颜色。
  • hsl.brighter([k])。：变得更亮。
  • hsl.darker([k]：变得更暗。
  • hsl.rgb()：返回对应的RGB颜色。
  • hsl.toString()：以RGB字符串形式输出该颜色。
    在这里插入图片描述

1.3 颜色插值

d3.interpolate(a,b)：计算介于两种颜色之间的颜色

var colorA=d3.rgb(255,0,0) // red
var colorB=d3.rgb(0,255,0)  // green

var compute = d3.interpolate(colorA, colorB) // 返回一个函数
compute(0) // red
compute(1) // green
compute(0.3) // 介于红绿之间的颜色

2. 线段生成器

2.1 生成线段方式汇总

<line x1="20", y1="20", x2="30", y2="30" />

svg.append("line")
	.attr("x1",20)
	.attr("y1",20)
	.attr("x2",30)
	.attr("y2",30)

<path d="M20,20 L30,30" />

svg.append("path")
	.attr("d","M20,20 L30,30")

2.2 线段生成器

  • d3.svg.line()：创建一个线段生成器
  • line(data)：绘制data数据。
  • line.x([x])：设置/获取线段x坐标的数据。
  • line.y([y])：设置/获取y坐标的访问器。
  • line.interpolate([interpolate])：设置/获取线段的插值模式，共有13种，默认线性插值(linear)
  • line.tension([tension])：设置/获取张力系数，当插值模式为cardinal、cardinal-open、cardinal-closed的时候有效。
  • line.defined([defined])：设置/获取一个访问器，用于确认线段是否存在，只有判定为存在的数据才被绘制。
//代码一
// 线段的点数据
var lines = [[80,801],[200,100],[200,2001],[100,200]];
//创建一个线段生成器
var linePath = d3.svg.line();
//添加路径
svg.append("path")
	.attr("d",linePath(lines))/使用了线段生成器
	.attr("stroke", "black")

在这里插入图片描述

// 代码二
// 使用line.x()
var line=[80,120,160,200,240,280];
var linePath =d3.svg.line()
					.x(function(d){
						return d;
					})
					.y(function(d, i){
						return i%2==0?40:120;
					})

在这里插入图片描述

// 代码三
// 使用插值
var linePath = d3.svg.line()
						.interpolate("linear-closed")

// 代码四
// 使用defined()，选择性的使用顶点数据
var lines=[80,120,160,200,240,280];
var linePath = d3.svg.line()
					.x(function(d){
						return d;
					})
					.y(function(d, i){
						return i%2==0?40:120;
					})
					.defined(function(d){
						return d<200;  // 如果值大于200，则不绘制
					})

在这里插入图片描述

3 区域生成器

d3.svg.area()：用于生成一块区域，有x()、x0() 、x1() 、y() 、y0() 、y1()六个数据访问器，有线段生成器的那些方法
可用于生成面积图

var dataset=[80,120,130,70,60,90];
// 创建一个区域生成器,使用了三个数据访问器
var areaPath = d3.svg.area()
					.x(function(d, i){ return 50+i*60;})
					.y(function(d, i){ return height/2;})
					.y0(function(d, i){ return height/2-d;})

// 添加路径
svg.append("path")
	.attr("d", areaPath(dataset)) // areaPath(dataset)返回的字符串作为d的值
	.attr("stroke","blue")
	.attr("stroke-width","3px")
	.attr("fill","yellow")

在这里插入图片描述

4 弧生成器

d3.svg.arc()：通过起始角度、终止角度、内外半径等生成弧线
可用于制作饼图、弦图
  • innerRadius()：内半径访问器
  • outerRadius()：外半径访问器
  • startAngle()：起始角度访问器
  • endAngle()：终止角度访问器
  • arc.centroid()：计算弧中心位置
    在这里插入图片描述
// 四段弧的数据
var dataset=[
	{startAngle: 0 ,endAngle: Math.PI* 0.61}, 
	{startAngle:Math.PI*0.6 , endAngle:Math.PI}, 
	{startAngle: Math.PI, endAngle:Math.PI *.1.7},
	{startAngle: Math.PI * 1.7 , endAngle:Math.PI * 2}];

// 创建一个颜色比例尺
var color=d3.scale.category10()

//创建一个弧生成器
var arcPath = d3.svg.arc()
	.innerRadius(0)
	.outerRadius(100);
	
//添加路径
svg.selectAll("path")
	.data(dataset)
	.enter()
	.append("path")
	.attr("d", function(d){ return arcPath(dataset);}) // 将弧生成器的计算结果作为d的值
	.attr("transform","translate(250,25O)")
	.attr("stroke","black")
	.attr("stroke-width", "2px")
	.attr("fi11", function(d, i){ return color(i);});

// 添加文本
svg.selectAll("text")
	.dataset(dataset)
	.enter()
	.append("text")
	.attr("transform", function(d){
		return "translate(250,250)" + "translate(" + arcPath.centroid(d) + ")";})
	.attr("text-anchor","middle")
	.text(function(d){
	RETURN Math.floor((d.endAngle-d.startAngle)*180/Math.PI) + "°";
	}); // Math.floor返回≤给定数字的一个最大整数

在这里插入图片描述

5 符号生成器

  • d3.svg.symbol()：创建符号生成器。
  • symbol(datum[, index])：返回指定数据datum的路径字符串。
  • symbol.type([type])：设置/获取符号的类型。
  • symbol.size([size])：设置/获取符号的大小，单位是像素的平方。例如设定为100，则是一个宽度为10，高度也为10的符号。默认是64。
  • d3.svg.symbolTypes()：支持的符号类型，共六种，返回数组。
    在这里插入图片描述
    在这里插入图片描述

6 弦生成器

d3.svg.chord()：根据两段弧绘制弦，将两段弧连接起来，5个访问器：
source() 、target()、 radius() 、startAngle() 、endAngle()

在这里插入图片描述

  • 数据格式
{
	source:{
		start: 0.2,
		end: Math.PI*0.3,
		radius: 100
	},
	target:{
		start: Math.PI* 1.0,
		end: Math.PI*1.6,
		radius:100
}
  • 使用1
var chord = d3.svg.chord()
				.source(function(d return d.startArc; })
				.target(function (d return d.endArc; })
				.radius(200)
				.startAngle(function (d) return d.start; })
				.endAngle(funetion (d)(return d.end;});
  • 使用2
var chord = d3.svg.chord()

svg.append("path")
	.attr("d", chord(dataset))
	.attr("transform","translate(250,25O)")
	.attr("stroke","black")
	.attr("stroke-width", "2px")
	.attr("fi11", "red");

在这里插入图片描述

7 对角线生成器

d3.svg.disgonal()：将两个点连接起来，2个访问器：source()、target()；投影函数：projection()

var dataset= {
	{source:×:100 .y:100},
	{target: x:300 , y:200}
}
//创建一个对角线生成器
var diagonal = d3.svg.diagonal();
//添加路径
svg.append("path")
	.attr("d",diagonal (dataset))
	.attr("fi11","none")
	.attr("stroke","black")
	.attr("stroke-width",3);

在这里插入图片描述

  • 使用投影:projection()
    x坐标和y坐标都会放大1.5倍，起点坐标变为(150,150)，终点坐标变为(450,300)。但原数据并不会更改，只是在绘制的时候使用投影后的坐标。
var diagonal = d3.svg.diagonal()
					projection(function (d){
						var x = d.x*1.5:
						var y = d.y*1.5;
						return[x,y]:
					});

8 绘制折线图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <scrip src="https://d3js.org/d3.v3.min.js"></scrip>
    <script src="../d3.v3.min.js"></script> 
    <title></title>
</head>
<style>
    .axis path {
      /* 设置坐标轴横线的样式 */
      stroke: blue;
      fill: none;
      shape-rendering: crispEdges;
    }

    .axis line {
      /* 设置刻度的样式*/
      stroke: red;
      fill: none;
      shape-rendering: crispEdges;
    }

    .axis text {
      /*设置刻度文本的样式 */
      font-size: 12px;
      
    }
</style>
<body>
    <script>
        var dataset=[
            {
                country:"china",
                gdp:[[2000,11920], [2001,13170],[2002,14550],
                    [2003,16500],[2004,19440],[2005,22870],
                    [2006,27930],[2007,35040],[2008,45470],
                    [2009,51050],[2010,59490],[2011,73140],
                    [2012,83860],[2013,103550]]
            },
            {
                country:"japan",
                gdp:[[2000,47310],[2001,41590],[2002,39800],
                    [2003,43020],[2004,46550],[2005,45710],
                    [2006,43560],[2007, 43560],[2008,48490],
                    [2009,50350],[2010,54950],[2011,59050],
                    [2012,59370],[2013,48980]]
            }
        ]

        //计算GDP的最大值
        var gdpmax = 0;
        for(var i=0; i<dataset.length; i++){
            var currGdp = d3.max(dataset[i].gdp , function (d){
                return d[1];
            });
            if(currGdp > gdpmax )
                gdpmax = currGdp;
        }

        var padding = {"top":100, "left": 100}
        // 声明绘图的svg
        var svg=d3.select("body")
                    .append("svg")
                    .attr("width", 600)
                    .attr("height", 600)

        // 线性比例尺
        var xScale = d3.scale.linear().nice()
                        .domain([2000,2013])
                        .range([0,500])
        var yScale = d3.scale.linear()
                        .domain([0,gdpmax])
                        .range([400, 0])
                        
        // 坐标轴
        var xAxis = d3.svg.axis()
                        .scale(xScale)
                        .orient("bottom")
                        .ticks(6)
        var yAxis = d3.svg.axis()
                        .scale(yScale)
                        .orient("left")
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(100,500)")
            .call(xAxis);
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(100,100)")
            .call(yAxis);

        // 绘制折线图
        var linePath = d3.svg.line()
                            .x(function(d){
                                return xScale(d[0]) + padding.left;
                            })
                            .y(function(d){
                                return yScale(d[1])+padding.top;
                            })
        // 中国折线
        svg.append("path")
            .attr("d", linePath(dataset[0].gdp))
            .attr("fill", "none")
            .attr("stroke","red")
        // 日本折线
        svg.append("path")
            .attr("d", linePath(dataset[1].gdp))
            .attr("fill", "none")
            .attr("stroke","green")

        // 创建符号生成器
        var symbol = d3.svg.symbol()
                            .size(100)
                            .type("square")
        
        // 增加标记
        svg.append("path")
            .attr("d", symbol())
            .attr("fill", "red")
            .attr("transform","translate(100,550)")
        svg.append("text")
            .attr("font-size","12px")
            .attr("transform","translate(110,555)")
            .text("China")

        svg.append("path")
            .attr("d", symbol())
            .attr("fill", "green")
            .attr("transform","translate(250,550)")
        svg.append("text")
            .attr("font-size","12px")
            .attr("transform","translate(260,555)")
            .text("Japan")
    </script>
</body>
</html>

效果
在这里插入图片描述

References

[1] 吕之华.精通D3.js：交互式数据可视化高级编程[M].北京：电子工业出版社,2015∶128-142.

ddddot
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3.js Path Transition（折线图的更新）
m0_37777005的博客
07-23 1177
可视化肯定是需要及时更新数据的，每秒填充一次数据，渲染到图表中。 大概思路就是：重绘line，向左平移，把多余的line 裁剪掉。 const n = 100; const duration = 1000; let time = new Date(Date.now() - duration); const random = d3.randomNormal(0...
D3.js - path使用
m0_46390103的博客
12-06 888
D3.js-path使用
Learning D3.js(5) d3的path讲解
热门推荐
wujingwen1111的专栏
03-11 1万+
转自：http://www.d3js.cn/?p=68 svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形，包括矩形，圆形，椭圆，折线，多边形，直线，曲线等。 W3 标准对SVG 的Path定义如下 SVG路径代表一个形状的轮廓,可以描边,填充,用作剪切路径,或任何三者的结合。 W3提供了一个形象的比喻，用钢笔和纸来表示svg的path *
推荐一个强大的地图SVG生成器——PHP Geo SVG
最新发布
gitblog_00074的博客
06-13 357
推荐一个强大的地图SVG生成器——PHP Geo SVG 项目地址:https://gitcode.com/PrinsFrank/php-geo-svg 在数据可视化和地理信息应用中，高质量的地图是不可或缺的元素。然而，寻找无版权、高精度且易于定制的SVG地图并不容易。这就是PHP Geo SVG项目应运而生的原因。这个开源工具让你能够轻松地生成SVG地图，无需依赖外部服务，同时保护用户隐私。 ...
探索SVGPath：一款强大的SVG路径工具
gitblog_00099的博客
04-17 652
探索SVGPath：一款强大的SVG路径工具 项目地址:https://gitcode.com/fontello/svgpath SVGPath 是一个在线工具，旨在帮助开发者和设计师轻松地创建、修改与优化SVG路径代码。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形标准，广泛应用于网页设计和前端开发中，因为它可以无损缩放且文件大小小巧。 技术分析 SVGPa...
深入学习D3JS：d3-color
Dosth_Magic
04-10 3489
d3color对颜色进行操作，比如 根据名字设置颜色，steelblue var c = d3.color("steelblue"); // {r: 70, g: 130, b: 180, opacity: 1} 转化为hsl格式 var c = d3.hsl("steelblue"); // {h: 207.27…, s: 0.44, l: 0.4902…, opacity: 1} ...
【 D3.js 高级系列 — 5.0 】 颜色
weixin_30443075的博客
04-19 488
颜色是作图不可少的概念，常用的标准有 RGB 和 HSL，D3 提供了创建颜色对象的方法，能够相互转换和插值。RGB色彩模式是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道相互叠加来得到各式各样的颜色。三个通道的值的范围都为0~255，因此总共能表示16777216(256 * 256 * 256)种，即一千六百多万种。几乎包括了人类所能识别的所有颜色，是最广泛也是最容易理解...
地理路径生成器d3.deo.path()
weixin_30414245的博客
10-05 257
这篇文章是《数据可视化实战》中的作者例子，我只不过是想重温下地理路径生成器的使用思路。 地理路径的格式有两种，geojson，topojson，topojson是d3作者mike自创的一种格式，并没有成为一种标准，这个例子是书中例子，格式是geojson形式的。 1.数据格式 数组中每个字典都代表了一个州的边界数据， 2.我们先看下代码 <...
【 D3.js 高级系列 — 6.0 】 值域和颜色
weixin_30588729的博客
05-20 511
在【入门 - 第 10 章】作了一张中国地图，其中各省份的颜色值都是随意赋值的。如果要将一些值反映在地图上，可以利用颜色的变化来表示值的变化。1. 思路例如，有值域的范围为：[10, 500]现希望10用浅绿表示，500用深绿表示，10到500之间的值用浅绿和深绿之间的颜色表示。显然，此处需要一个函数，传入的参数是10到500之间的值，返回值是浅绿到深绿之间的颜色值。【高级 - 第 5.1 章...
深入学习D3JS: d3-path
Dosth_Magic
04-10 1435
function drawCircle(context, radius) { context.moveTo(radius, 0); context.arc(0, 0, radius, 0, 2 * Math.PI); } 使用canvas画图你需要上面的代码，d3.path可以让你在svg上使用类似代码画图。 var context = d3.path(); drawCircle(...
包含 dagre-d3.js d3.js 最新版 亲测可用
12-01
D3.js（Data-Driven Documents）和dagre-d3是两个强大的JavaScript库，用于创建动态、交互式的图表和图形。这两个库的结合使得在网页上绘制流程图变得极其简单且高效。 首先，我们来详细了解D3.js。D3.js是由Mike ...
d3-colorlegend:d3js使用的颜色图例
05-17
d3.colorLegend 该脚本可用于在指定的html div元素上绘制的颜色图例。 是必需的。 用法 图例的高度和宽度由目标元素的大小定义。 图例将绘制在元素的左上角（加上少量填充），如果指定了“填充”选项，或者如果请求的尺寸太大而无法容纳可用空间，则将在整个显示中填充图例。 colorLegend(target, scale, type, options); 参数 target：用于放置图例的html元素ID（通常是div ID #el） 比例尺： type：d3比例尺的类型。 支持的比例为： ：线性比例尺由许多在颜色范围之间插值的框绘制。 第一项和最后一项被标记。 ：在颜色范围内为每个项目绘制位数。 第一项和最后一项被标记。 ：在颜色范围内为每个项目绘制顺序刻度，每个项目之间的间距很小。 每个项目都有标签。 选项：用于控制显示的可选参数 boxWidth：整数，用
Vue.D3.tree D3.jsVue.D3.tree-基于D3.js的树视图-Vue.js开发
05-27
Vue.D3.tree Vue组件可基于D3.js布局显示图形。 Tree Live演示https://david-desmaisons.github.io/Vue.D3.tree/tree用法 从'vued3tree'导入{tree}导出默认{组件：{树}，data（）{返回{树：{名称：“父亲”，子代：...
d3.min.js--------------
05-13
d3.min.js
D3.js-Demos-master.zip_d3_python
07-15
D3.js，全名Data-Driven Documents，是一个强大的JavaScript库，专用于数据绑定和操作DOM（文档对象模型）以创建互动的数据可视化。在本案例中，“D3.js-Demos-master.zip_d3_python”是一个压缩包，包含了一系列用...
D3.js-Quick-Start-Guide:Packt发行的D3.js快速入门指南
05-28
本书将带您学习D3.js的基础知识，以便您可以创建自己的交互式可视化效果，以及创建开发人员，科学家，统计学家或数据科学家遇到的最常见的图形。 本书涵盖以下激动人心的功能： 建立散点图建立条形图建立饼图建立力...
【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变
weixin_30340745的博客
05-09 805
颜色插值指的是给出两个 RGB 颜色值，两个颜色之间的值通过插值函数计算得到。线性渐变是添加到 SVG 图形上的过滤器，只需给出两端的颜色值即可。1. 颜色插值在【高级 - 第 5.0 章】里已经提到了颜色插值，在这里做一个例子。先定义颜色插值函数如下，var a = d3.rgb(255,0,0); //红色 var b = d3.rgb(0,255,0); //绿色 var compu...
D3.js(3) path/折线图
Michelle209的博客
04-22 1172
调试的时候把定时器的时间设置的比transition短很多，感觉图像每次都没画到位，在这停了好久。文档：https://github.com/d3/d3-shape/tree/v1.3.7。最后那个所有折线的汇总和颜色标签是修改了源代码自己添加的效果，学有成效就好~元素是用来绘制各种形状（例如线条、曲线、弧形、圆弧等）的元素。属性是一个字符串，包含一系列的命令和参数，用来描述路径的形状。属性用来定义绘制的路径。
d3,颜色插值
artemisrj的专栏
03-17 2585
下面的代码显示d3的几种颜色插值。 关于说明文档 https://github.com/mbostock/d3/wiki/Transitions#d3_interpolateHcl 示例 Linear Color Interpolation Hsl rgb lab var max = 21, data = [];
【 D3.js 入门系列 --- 0 】 简介及安装
05-31
非常好的问题！很高兴为您解答。 D3.js是一个用于数据可视化的JavaScript库，它可以帮助您在网页上创建漂亮的、交互式的数据可视化图表。与其他库相比，D3.js具有很高的灵活性和可定制性，可以让您根据自己的需求绘制几乎任何类型的图表。 安装D3.js非常简单，您只需要在网页中引入D3.js的JavaScript文件即可。您可以从D3.js的官方网站（https://d3js.org/）下载最新版本的D3.js。在您的HTML文件中，只需添加以下代码即可引入D3.js： ```html <script src="https://d3js.org/d3.v7.min.js"></script> ``` 这将在您的网页中加载最新版本的D3.js库。接下来，您就可以开始使用D3.js来创建您自己的数据可视化图表了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值