D3.js入门与进阶：数据可视化实战技巧

需积分: 9 136 浏览量更新于2024-07-19 收藏 1.39MB PDF 举报

"D3 Tips and Tricks" 是一份关于如何利用 D3.js 进行前端数据可视化的详细指南。D3.js 是一个强大的 JavaScript 库，专为创建动态、交互式的数据可视化而设计，尤其适用于数据驱动的文档（Document Object Model，DOM）操作。这份文档针对初学者，提供了一个从入门到进阶的学习路径。首先，为了顺利开始，你需要具备基本的 Web 开发技能，包括 HTML5、JavaScript 和 CSS，这些都是构建网页的基础。了解 Web 服务器的工作原理也是有益的，虽然不是必须，但能帮助你更好地部署和分享你的项目。在文本编辑器方面，选择一款支持代码高亮和版本控制的工具，如 Sublime Text 或 Visual Studio Code，可以提高开发效率。获取 D3.js 可以通过官方网站（www.d3noob.org）下载或通过npm（Node Package Manager）安装。章节内容涵盖了从创建基础图形开始，包括设置HTML结构、CSS样式来定义视觉呈现，以及编写D3 JavaScript 代码来实现数据绑定、设置坐标轴、绘制线条和曲线等。例如，学习如何格式化日期时间、设置坐标轴范围和刻度，这些都是数据可视化中的关键步骤。对于进阶技巧，文档介绍了添加轴标签、图例、平滑曲线、网格线、填充区域以及添加阴影等。例如，如何创建带有网格线的图表，不仅使数据更易于解读，还能通过定义自定义函数和CSS来调整线条样式，如虚线和阴影效果，提升图表的视觉吸引力。总结来说，"D3 Tips and Tricks" 是一本实用的教程，适合想要提升前端数据可视化能力的开发者，无论你是初次接触 D3.js，还是希望掌握更多高级用法，都能从中找到有价值的知识和实践案例。通过跟随文档逐步实践，读者能够快速掌握 D3.js 的核心概念，并将它们应用到实际项目中。随着作者持续更新，确保你始终拥有最新和最全面的D3.js技术指南。

D3 JavaScript

Right, the D3 JavaScript part is as follows;

var margin = {top: 30, right: 20, bottom: 30, left: 50},

width = 600 - margin.left - margin.right,

height = 270 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.time.scale().range([0, width]);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)

.orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)

.orient("left").ticks(5);

var valueline = d3.svg.line()

.x(function(d) { return x(d.date); })

.y(function(d) { return y(d.close); });

var svg = d3.select("body")

.append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Get the data

d3.tsv("data/data.tsv", function(error, data) {

data.forEach(function(d) {

d.date = parseDate(d.date);

d.close = +d.close;

});

// Scale the range of the data

x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([0, d3.max(data, function(d) { return d.close; })]);

svg.append("path") // Add the valueline path.

.attr("class", "line")

.attr("d", valueline(data));

svg.append("g") // Add the X Axis

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis);

d3noob.org 16

svg.append("g") // Add the Y Axis

.attr("class", "y axis")

.call(yAxis);

});

Again there's quite a bit of detail in the code, but it's not so long that you can't work out what's

doing what.

Let's examine the blocks bit by bit to get a feel for it.

Setting up the margins and the graph area.

The part of the code responsible for defining the canvas (or the area where the graph and associated

bits and pieces is placed ) is this part.

var margin = {top: 30, right: 20, bottom: 30, left: 50},

width = 600 - margin.left - margin.right,

height = 270 - margin.top - margin.bottom;

This is really (really) well explained on Mike Bostock's page on margin conventions here

'http://bl.ocks.org/3019563', but at the risk of confusing you here's my crude take on it.

The first line defines the four margins that surround the block where the graph proper will be.

var margin = {top: 30, right: 20, bottom: 30, left: 50},

So there will be a border of 30 pixels at the top, 20 at the right and 30 and 50 at the bottom and left

respectively. Now the cool thing about how these are set up is that they use an array to define

everything. That means if you want to do calculations in the JavaScript later, you don't need to put

the numbers in, you just use the variable that has been set up. In this case margin.right = 20!

So when we go to the next line;

width = 600 - margin.left - margin.right,

the width of the inner block of the canvas where the graph will be drawn is 600 pixels – margin.left

– margin.right or 600-50-20 or 530 pixels wide. Of course now you have another variable 'width'

that we can use later in the code.

Obviously the same treatment is given to height.

Another cool thing about all of this is that just because you appear to have defined separate areas for

the graph and the margins, the whole area in there is available for use. It just makes it really useful

to have areas set aside for the axis labels and graph labels to go without having to juggle them and

the graph proper at the same time.

So, let's have a play and change some values.

var margin = {top: 80, right: 20, bottom: 80, left: 50},

width = 400 - margin.left - margin.right,

height = 270 - margin.top – margin.bottom;

d3noob.org 17

];

The format of the data shown above is called JSON (JavaScript Object Notation) and it's a great

way to include data since it's easy for humans to read what's in there and it's easy for computers to

parse the data out.

But if you've got a fair bit of data or if the data you want to include is dynamic and could be

changing from one moment to the next, you'll want to load it from an external source. That's when

we call on D3's 'Request' functions.

A 'Request' is a function that instructs the browser to reach out and grab some data from

somewhere. It could be stored locally (on the web server) or somewhere out in the internet.

There are different types of requests depending on the type of data you want to ingest. Each type of

data is formatted with different rules, so the different requests interpret those rules to make sure that

the data is returned to the D3 processing in a format that it understands. You could therefore think of

the different 'Requests' as translators and the different data formats as being foreign languages.

The different types of data that can be requested by D3 are;

• text

A plain old piece of text that can optionally be encoded in a particular way (see the D3

API

• json

This is the afore mentioned JavaScript Object Notation.

• xml

Extensible Markup Language is a language that is widely used for encoding documents in a

human readable forrm.

• html

HyperText Markup Language is the language used for displaying web pages.

• csv

Comma Separated Values is a widely used format for storing data where plain text

information is separated by (wait for it) commas.

• tsv

Tab Separated Values is a widely used format for storing data where plain text information is

separated by a tab-stop character.

Details on these ingestion methods and the formats for the requests are explained well on the D3

Wiki page here - https://github.com/mbostock/d3/wiki/Requests. In this particular script we will

look at the tsv request method.

Now, it is important to note here that this is not an exclusive list of what can be ingested. If you've

got some funky data in a weird format, you can still get it in, but you will most likely need to stand

up a small amount of code somewhere else in your page to do the conversion (we will look at this

process when describing getting data from a MySQL database).

So, back to our request...

d3.tsv("data/data.tsv", function(error, data) {

data.forEach(function(d) {

d.date = parseDate(d.date);

10 https://github.com/mbostock/d3/wiki/Requests

d3noob.org 19

d.close = +d.close;

});

The first line of that piece of code invokes the d3.tsv request (d3.tsv) and then the function is

pointed to the data file that should be loaded ("data/data.tsv"). This is referred to as the 'url' (unique

resource locator) of the file. In this case the file is stored locally, but the url could just as easily

point to a file somewhere on the Internet.

The format of the data in the data.tsv file looks a bit like this;

date close

1-May-12 58.13

30-Apr-12 53.98

27-Apr-12 67.00

26-Apr-12 89.70

25-Apr-12 99.00

(although the file is longer (about 26 data points)). The 'date' and the 'close' heading labels are

separated by a tab as are each subsequent dates and numbers. Hence the 'tab separated values' :-).

The next part is part of the coolness of JavaScript. With the request made and the file requested the

script is told to carry out a function on the data (which will now be called 'data').

function(error, data) {

Now, there are actually more things that get acted on as part of the function call, but the one we will

consider here are the following lines;

data.forEach(function(d) {

d.date = parseDate(d.date);

d.close = +d.close;

});

This block of code simply ensures that all the numeric values that are pulled out of the tsv file are

set and formatted correctly. The first line sets the data variable that is being dealt with (called

slightly confusingly 'data') and tells the block of code that for each group within the 'data' array it

should carry out a function on them. That function is designated 'd'.

data.forEach(function(d) {

The information in the array can be considered as being stored in rows with each row consisting of

two values. One value for 'date' and another value for 'close'.

So the function is pulling out values of 'date' and 'close' one row at a time.

Each time it gets a value of 'data' and 'close it carries out the following operations;

d.date = parseDate(d.date);

This the specific value of date being looked at ( d.date) into a date format that D3 can process and

do stuff with via a separate function 'parseDate'. Now, the 'parseDate' function is defined in a

separate part of the script, and we will examine that later. So for the moment, just be satisfied that it

takes the raw date information from the tsv file in a specific crow and converts it into a format that

D3 can then process. That value is then re-saved in the same variable space.

The next line then sets the 'close' value to a numeric value (if it isn't already) using the '+' operator.

d.close = +d.close;

d3noob.org 20

剩余102页未读，继续阅读

Eason_Googler

粉丝: 0
资源: 1

D3.js入门与进阶：数据可视化实战技巧

D3技巧和窍门：Web浏览器中的交互式数据可视化D3 Tips and Tricks: Interactive Data Visualization in Web Browsers

tips

D3-Tips-and-Tricks:用于存储D3提示和技巧文档的静态站点

D3技巧和窍门v3.x：Web浏览器中的交互式数据可视化D3 Tips and Tricks v3.x: Interactive Data Visualization in a Web Browser

前端项目-d3-tip.zip

d3-v6-tip:一个著名的 d3-tip 库，适配了最新的 - d3.v6 版本

D3 Tip 获取 X,Y

ARCore（Android的增强现实）：ARCore性能优化与调试技巧.docx

停止维护 基于 ReactNative、Redux 的漫画.zip

HIKVISION海康威视DS-7916N-E4 DS-7932N-E4录像机固件V3.4.106 build 200619

最新资源

停止维护基于 ReactNative、Redux 的漫画.zip