学习真是件奇妙的事情。这本书我之前都看过，有些的知识点却完全没有印象。

总结：把用到的知识好好研究；平时可以了解其他技术的基础，把相关的资料和难点记录下来。

javascript陷阱

1、变量类型

var myName = 'sfp';

typeOf myName;          //'String'

2、变量提升

for(var i=0; i<100; i++){

   //...

}

//i在for循环开始之前就有了定义

3、全局命名空间

比较好的做法：只在函数里面声明变量；只声明一个全局对象。

var local_name = {}   //声明空得全局变量，这样的话，只会给window增加一个变量。

SVG

<svg width='50' height='50'>

      <circle cx='25' cy='25' r='22' fill='blue' stroke='olive' stroke-width='1' />

</svg>　

需要给svg指定width，height；元素的属性值都不带单位

//基础元素，path用于绘制复杂的图形
<svg width='500' height='500'>

      <circle cx='25' cy='25' r='22' fill='blue' stroke='olive' stroke-width='1'></circle>

      <rect x='50' y='50' width='100' height='100'/>

      <ellipse cx='275' cy='75' rx='100' ry='25'/>

      <line x1='0' y1='200' x2='500' y2='200' stroke='red'/>
　　　 //y为基线，注意文字不要被切掉

      <text x='0' y='220' font-size='25'>sfp</text>

</svg>

为SVG元素添加样式：opacity

比较好的做法:可以区分svg和css的样式

svg .pumpkin{

  /*...*/

}

绘制顺序：数轴和数值标签，最后加到svg中

为fill，stroke指定颜色的时候使用rgba()，可以设置透明度

D3

HTML文件中加上<meta charset='utf-8'>

d3.select(''body).append('p'): 创建一个<p>，加到<body>末尾

加载数据的最佳实践：csv, tsv, json

var dataset;

d3.json('data.json', function(error, data){

    if(error){

        console.log(error);

    }else{

        dataset = data;

        console.log(data);

        otherfunction();

    }

});

//在callback也能使用返回的数据

//加载文件遇到问题时，会有提示

绑定数据

var dataset = [5, 10, 15, 20, 25];

d3.select('body')

	.selectAll('p')
　　　　　//此后所有的方法都将执行5遍

	.data(dataset)
　　　　  .enter()

	.append('p')

	.text(function(d){

		return d;

	});

attr()设置dom属性的值；style()直接给元素添加css样式

添加类.classed('bar', true);

删除类.classed('bar', false);

//.attr('class', 'bar')只能添加，不能删除，所以还是不用这种方法了。

HTML属性width,<img>中就有，<div>中就没有，所以设置属性使用attr还是style的具体看看

在DOM中创建一个元素，都用一个变量表示，方便以后使用。

var dataset = [5, 10, 15, 20, 25];

var w = 500;

var h = 50;

var svg = d3.select('body').append('svg');

svg.attr('width', w)

    .attr('height', h)

    ;

var circles = svg.selectAll('circle')

					.data(dataset)

					.enter()

					.append('circle')

					;

circles.attr('cx', function(d, i){

			return i*50+25;

		})

	    .attr('cy', function(d, i){

	    	return h/2;

	    })

	    .attr('r', function(d, i){

	    	return d;

	    })

一个svg元素只使用一个attr()和style(), 使用多值映射的方式

比例尺：把输入域 映射为 输出范围

dataset = [5, 10, 15, 20, 25];


// 改为d3.scaleLinear()

var scale = d3.scale.linear();
// 定义域

scale.domain([100, 500]);
// 值域

scale.range([10, 350]);

//动态范围

d3.max(dataset);   //25

var dataset_1 = [

		[5, 20],

		[480, 90]

	];

//二维数组

d3.max(dataset_1, function(d){

	return d[0];

})

//480
//.nice():把两端的值扩展到最接近的整数
//.rangeRound():输出的值舍入
//.clamp():超出范围的值，取整到最值

数轴：生成轴线，标签，刻度

dataset = [5, 10, 15, 20, 25];
var format = d3.format('.1%');

var svg = d3.select('body').append('svg');

svg.attr({

	width: 500,

	height:100

})

var scale = d3.scale.linear();

scale.domain([100, 500]);

scale.range([10, 350]);


// 改为axisBottom()

var axis = d3.svg.axis()

				.scale(scale)

				.orient('bottom')
　　　　　　　　　　　　　　　　　　  .tickFormat(format)

				;

svg.append('g')

	//把<g>交给axis()

	.classed('axis', true)
　　　　 //平移
　　　　 // 改为.attr('transform', 'translate(0, 50)')

	.attr({

		transform: "translate(0, 50)"

	})

	.call(axis)

	;

svg{

	margin-top:100px;

}

.axis path{

	fill:none;

	stroke:black;

	stroke-width:2px;
　　　　 //保证数轴和刻度线精确到像素级

	shape-rendering:crispEdges;

}

.axis line{

	fill:none;

	stroke:red;

	stroke-width:2px;

	shape-rendering:crispEdges;

}

.axis text{

	color:red;

}

数轴会放在<g>中，有<line><text><path>三部分组成，可以各自设置样式

指定刻度个数：ticks(5)

垂直数轴：orient('left')

动画

使用序数比例尺生成条形图：更加简洁

var w = 600;

var h = 250;

var dataset = [5,10,15,20,25];

var svg = d3.select('body').append('svg');

svg.attr({

  width: w,

  height:h

});

var xScale = d3.scale.ordinal()

                      //d3.range(2)--[0,1]

                      .domain(d3.range(dataset.length))

                      //将值域分为2档，输出值舍入，档间距为每档宽度的5%

                      .rangeRoundBands([0, w], .05)

                      ;

svg.selectAll('rect')

    .data(dataset)

    .enter()

    .append('rect')

    .attr({

      //更新,根据i返回x的位置

      x: function(d, i){

        return xScale(i);

      },

      y: function(d, i){

        return h-d*10;

      },

      //直接得到width

      width: xScale.rangeBand(),

      height: function(d, i){

        return d*10;

      }

    })

//过渡动画
.transition()
//延迟时间

.delay()
//持续时间

.duration(1000)
//缓动函数

.ease('linear')
//过渡开始执行的操纵
.each('start', function(){
　　d3.select(this)
　　　　.attr('', '')
　　　　;
})
.attr({})
//过渡结束执行的操作
.each('end', function(){
　　...
})

;

9.3.7 剪切路径？

忽略鼠标事件：pointer-events：none

排序

d3.selectAll('rect')

  .sort(function(a, b){

    return d3.ascending(a, b);

  })

提示条

.on('mouseover', function(d){

      console.log(d3.select(this).attr('x'));

})

　

以上有些修改，是因为之前使用的是V3，现在换为V4了。　

　

　　

D3 数据可视化实战 笔记的更多相关文章

  1. Python数据可视化实战：实时更新海外疫情数据，实现数据可视化

    前言 我国的疫情已经得到了科学的控制,开始了全面的复工复产,但是国外的疫情却“停不下来”.国外现在可谓就是处于水深火热当中啊,病毒极强的传染性,导致了许多的人都“中招”了,我国已经全面复工复产了,人大 ...

  2. 数据可视化(7)--D3基础

    一直想写写D3,觉得D3真心比较强大,基本上你能想出来的图表都能绘制出来,只不过使用起来比前几个要稍麻烦一点. 正好最近读完了<数据可视化实战>,将关于D3的知识梳理了一遍,写这篇博客记录 ...

  3. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  4. 数据可视化 -- Python

    前提条件: 熟悉认知新的编程工具(jupyter notebook) 1.安装:采用pip的方式来安装Jupyter.输入安装命令pip install jupyter即可: 2.启动:安装完成后,我 ...

  5. d3可视化实战03：神奇的superformula

    需求驱动实现 前文讲过了D3的数据驱动机制,中间所举的例子都很简单.例如那个demo里面,绑定的数据是一个简单的数组,实现的图元也仅仅是一堆用SVG画的circle.但是现实世界中我们往往会遇到复杂的 ...

  6. d3可视化实战00：d3的使用心得和学习资料汇总

    最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了 ...

  7. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  8. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  9. d3可视化实战02：理解d3数据驱动的真正含义

    前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...

随机推荐

  1. WinForm应用程序中实现自动更新功能

    WinForm应用程序中实现自动更新功能 编写人:左丘文 2015-4-20 近来在给一客户实施ECM系统,但他们使用功能并不是我们ECM制造版提供的标准功能,他们要求对系统作一些定制功能,为了避免因 ...

  2. WinForm 弹窗

    private void FrmMyShow_Load(object sender, EventArgs e) { Rectangle r = Screen.GetWorkingArea(this); ...

  3. [转]MVC 分页

    本内容代码段抄自传智视频 /// <summary> /// 数据库分页 /// </summary> static List<dynamic> GetPageLi ...

  4. Eclipse中配置Maven build打包

    Eclipse中配置Maven build打包 clean package

  5. phpstorm破解 IntelliJ IDEA License Server本地搭建教程 http://blog.lanyus.com/archives/174.html/comment-page-6#comments 附件：mac环境

    ilanyu's Blog 搜索关键字搜索 首页IDEA注册码文件中转在线记事本老博客关于 IntelliJ IDEA License Server本地搭建教程 作者: ilanyu 时间: Marc ...

  6. Oracle11g 搭建单实例DataGuard （转载）

    原文:http://blog.itpub.net/29324876/viewspace-1246133/ 环境:主备库都为单实例并且数据库SID相同 OS:red hat 6.5 Oracle:11. ...

  7. canvas变换

    canvas变换 方法 save() 保存canvas状态 restore() 回复canvas保存的状态 translate(x, y) 移动canvas位置 rotate(radians) 顺时针 ...

  8. 接口自动化（三）--读取json文件中的数据

    上篇讲到实际的请求数据放置在json文件内,这一部分记述一下python读取json文件的实现. 代码如下(代码做了简化,根据需要调优:可做一些容错处理): 1 import json 2 3 cla ...

  9. python Flask篇（一）

    MarkdownPad Document *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  10. 679. 24 Game

    ▶ 给出四个整数,求他们是否能加减乘除括号拼凑成 24 ● 代码,11 ms,正向枚举,推广性很强(nums 可以改为任意长度,也不限于拼凑 24 这个和),缺点是只能判定是否有解,不方便输出不重复的 ...