首先了解下啥是D3
D3.js is a JavaScript library for manipulating documents based on data.
官网上第一句就是这个，也就是个js文件，下下来也不过几百k，但是听说可以画出各种酷炫图形去撩妹，所以打算学（zhuang）习（bi）一下。
其次要会HTML和JavaScript
举个简单的例子，画一个柱状图,数据长这样：var data = [4, 8, 15, 16, 23, 42];
用HTML写出来是这样滴
<!DOCTYPE html>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart">
<div style="width: 40px;">4</div>
<div style="width: 80px;">8</div>
<div style="width: 150px;">15</div>
<div style="width: 160px;">16</div>
<div style="width: 230px;">23</div>
<div style="width: 420px;">42</div>
</div>
然后要是用D3，感觉的确是简洁了一些。只要你会引个js文件，可以从网上下，也可以直接连url，建议还是下一个，有时候官网都连不上，到时候不知道是自己写错了还是网没连上。
<script src="https://d3js.org/d3.v4.min.js"></script>
绘制图形的代码
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
第一步 用class选择器选出图表的容器
var chart = d3.select(".chart");
第二步 通过定义我们将用来展示数据的容器来进行数据连接的初始化（别问我为啥这句话读起来不通顺，因为我也不懂啥意思，强行翻译的文档，看代码就懂了，囧）
var bar = chart.selectAll("div");
据文档所说，这个数据连接是可以创建、更新或者删除元素的，只要你想弄。文档说这种模式可能有点奇怪，我也觉得是有一点难理解。但是总的来说，可以把这种模式认为是你想让数据元素以什么形式存在。这样可以把静态的和动态的数据的代码写的几乎一样，的确省事儿。
解释下那个
selectAll
//append一个元素
svg.append("circle")
.attr("cx", d.x)
.attr("cy", d.y)
.attr("r", 2.5);
//不用写循环就能定义好所有元素
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 2.5);
But what’s with the
selectAll("circle")? Why do you have to select elements that you know don’t exist in order to create new ones? WAT. Here’s the deal. Instead of telling D3 how to do something, tell D3 what you want.
甭管我叫你干啥，关键是我想要你干啥。D3你得自己揣摩。没办法我是新手，D3你多担待。
第三步 连接数据到刚才指定的选择的容器
var barUpdate = bar.data(data);
第四步，数据入栈
var barEnter = barUpdate.enter().append("div");
第五步，设置下直方图的参数
barEnter.style("width", function(d) { return d * 10 + "px"; });
第六步，设置下文字
barEnter.text(function(d) { return d; });
又据文档说，D3的选择器还有其他功能。反正我觉得这地方和Beautifulsoup的各种选择器挺像的，反正HTML和XML的树形结构一长就是场噩梦。写爬虫那会儿的xpath要是用绝对路径都能吓死人。
文档还说barEnter.style("width", function(d) { return d * 10 + "px"; });中的d * 10是神来之笔，其实就是控制下图形相对大小，从而相对美观。关于这点，还可以有一些其他改进。
网友评论