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

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

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. cocos命令行生成项目

    cocos命令行生成项目: cocos new GoodDay(项目名称) -p com.boleban.www(包名字) -l cpp(项目类型) -d D:\DevProject\cocos2dx ...

  2. 《js笔记》

    1.判断浏览器是否启用cookie: if (navigator.cookieEnabled==true) { alert("已启用 cookie") } else { alert ...

  3. Python项目输出小类概率，机器学习

    from pandas import read_csv import numpy as np from sklearn.datasets.base import Bunch import pickle ...

  4. mysql迁移之巨大数据量快速迁移方案

    mysql迁移之巨大数据量快速迁移方案-增量备份及恢复 --chenjianwen 一.前言: 当mysql库的大小达到几十个G或者上百G,迁移起来是一件非常费事的事情,业务中断,导出导入耗费大量的时 ...

  5. ggplot map

    ggplot {ggplot2} R Documentation Create a new ggplot Description ggplot() initializes a ggplot objec ...

  6. Django之路 - 实现登录随机验证码

    登录验证码是每个网站登录时的基本标配,网上也有很多相应的文章, 但是从生成验证码到 应用到自己的网站上的全步骤,并没有看到很多, 为了节约大家的时间,我把整体步骤写下来, 即拿即用哈 1. 生成随机验 ...

  7. Vue项目中将table组件导出Excel表格以及打印页面内容

    体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...

  8. 在WebBrowser中发送POST请求

    我们要用到的也是WebBrowser的“Navigate”方法,其函数原型如下所示: Sub Navigate(URL As String, [Flags], [TargetFrameName], [ ...

  9. html 1.0 鼠标放上去会亮 onmouseover onmouseout 以及this标签的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. LeetCode之链表

    2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The digits ...