学习D3.js可视化

Posted on | In | Views:

之前D3.js所学知识可以从我的博客的逐渐完善聚类效果的可视化中找到
因此基础的一些不在此教程中了，以下的一些将参考书本以及网站

数据可视化-使用D3设计交互式图表

D3版本4.5.0。目前是5.5.0，在这里暂时不考虑向高版本升级

书本采用人民邮电出版社的《数据可视化-使用D3设计交互式图表》（作者Scott Murray），我的D3入门书也是JavaScript的入门教材。

第五章 读取数据

rowConverter作为一个新参数，可以进行逐行的数据预处理 

1
2
3
4
5
6
7
8
var rowConverter = function(d) {
    return {
        Food: d.Food, //No conversion
        Deliciousness: parseFloat(d.Deliciousness)
        };
}
d3.csv("food.csv", rowConverter, function(data) { console.log(data);
});

第八章 数轴

第一版内容

首先建立了两个比例尺，又根据数据范围建立相应的坐标轴（ticks是5，但是D3会为了美观而在5附近取值，tickFormat用于格式化坐标轴标签尺度的数据格式，这里是保留一位有效数组）。
紧接着创建了g分组，并将它传递给坐标轴（call函数），可以认为这时候坐标轴函数相当于一个魔法师开始打造不一样的g分组了！设置g分组属于类.axis是为了可以在CSS样式表中统一对坐标轴的视觉格式进行管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var xScale = d3.scaleLinear()
             .domain([0, d3.max(dataset, function(d) { return d[0]; })])
             .range([padding, w - padding * 2]);

var yScale = d3.scaleLinear()
             .domain([0, d3.max(dataset, function(d) { return d[1]; })])
             .range([h - padding, padding]);

var formatAsPercentage = d3.format(".1%");

var xAxis = d3.axisBottom()
              .scale(xScale)
              .ticks(5)
              .tickFormat(formatAsPercentage);

var yAxis = d3.axisLeft()
              .scale(yScale)
              .ticks(5)
              .tickFormat(formatAsPercentage);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

//Create Y axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

第二版增加的内容

可以增加时间比例尺
d3.extent等于mma的MinMax函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var parseTime = d3.timeParse("%m/%d/%y");

//Function for converting CSV values from strings to Dates and numbers
//parseInt是JavaScript的函数
var rowConverter = function(d) {
    return {
        Date: parseTime(d.Date),
        Amount: parseInt(d.Amount)
    };
}

xScale = d3.scaleTime()
           .domain(
                d3.extent(dataset, function(d) { return d.Date; }),
            )
           .range([padding, w - padding]);

第九章 更新、过渡和动画