读《数据可视化实战》笔记
2018-07-07 本文已影响0人
一世长安乱
解决全局变量命名空间变量名重复冲突(技巧)
- 只在函数里面声明变量。虽然有时候也不是绝对可行,但是函数级作用域可以防止其本地变量跟其他变量发生冲突。
- 只声明一个全局对象,然后把本来想作为全局变量的值都作为这个对象的属性。
var Vis = {}; //声明空的全局对象
Vis.id = 1;
Vis.name = 'dashuaibi';
// 这样所有的变量都被关在了全局对象Vis里面,因此就不会再污染全局命名空间
绘制条形图
根据数据值来编码颜色值。 (对于这个条形图而言, 这样做叫做双重编码, 即同样的数据值被编码成两种可见的特性: 条形高度和颜色。 )通过数据生成颜色也很简单, 同样只要写一个接收 d 作为参数的自定义函数即可。
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
双重编码
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var w = 500;
var h = 100;
var barPadding = 1;
var svg = d3.select("body").append("svg")
.attr("width", w).attr("height", h);
svg.selectAll("rect") // 条形图
.data(dataset)
.enter()
.append("rect")
.attr("x", function (d, i) {
return i * (w / dataset.length);
})
.attr("y", function (d) {
return h - d * 4;
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function (d) {
return d * 4;
})
.attr("fill", function (d) {
return "rgb(0, 0, "+ (d * 10) +")";
});
svg.selectAll("text") // 标签
.data(dataset)
.enter()
.append("text")
.text(function (d) {
return d;
})
.attr("x", function (d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function (d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white") // 填充
.attr("text-anchor", "middle") // 居中
绘制散点图
散点图var dataset = [
[ 5, 20 ],
[ 480, 90 ],
[ 250, 50 ],
[ 100, 33 ],
[ 330, 95 ],
[ 410, 12 ],
[ 475, 44 ],
[ 25, 67 ],
[ 85, 21 ],
[ 220, 88 ]
];
var w = 500;
var h = 100;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function (d) {
return d[0];
})
.attr("cy", function (d) {
return d[1];
})
.attr("r", function (d) {
return Math.sqrt(h - d[1]);
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function (d) {
return d[0] + "," + d[1];
})
.attr("x", function (d) {
return d[0];
})
.attr("y", function (d) {
return d[1];
})
.attr("fill", "red")
.attr("font-size", "11px")
.attr("font-family", "sans-serif");