D3.js(v5.7)基本应用

1.获取数据

获取csv和Json数据

d3.csv("cities.csv",function(row,index) {
      console.log(row);
})
d3.csv("cities.csv").then(function(data) {
      console.log(data);
})
d3.json("tweets.json").then(function(data) {
      console.log(data.tweets);
});

这两个的URL是相对路径。另外注意这两个方法都会对数据进行校验，看它是否符合csv或json格式。
注意两种csv传入回调函数的值是不一样的,第一种是遍历的每个元素，第二种是全部数据，而Json不能遍历只有一种。这与旧版本的有区别。

2. Transforming data

var newRamp = d3.scaleLinear().domain([10,15]).range([0,500]);
newRamp(12);
200
newRamp(19);
900
newRamp.invert(313);
13.129999999999999

这是将10到15的数值映射到了0到500。

var newRamp = d3.scaleLinear().domain([10,15]).range(['blue','red']);
undefined
newRamp(13)
"rgb(153, 0, 102)"
newRamp(19)
"rgb(255, 0, 0)"
newRamp(29)
"rgb(255, 0, 0)"
newRamp.invert("rgb(153, 0, 102)")
NaN

将数字映射到蓝到红色。由于invert()只能传入数字，所以不能映射回去。

数据离散归类

var sampleArray = [423,124,66,424,58,10,900,44,1];
var qScale = d3.scaleQuantile().domain(sampleArray).range([0,1,2]);
qScale(423)
2
qScale(20)
0
qScale(-20)
0
qScale(1000000)
2

这是将数据映射为离散的类别。上面的0，1，2也可以用字符串来代替。不过不同类别的边际值怎么决定的，还没看明白。

Nesting

按某个特征将数据分组，例如按不同人将所有评语分组。

var users = [{"name":"tom","comment":"Good"},{"name":"tom","comment":"excellent"},{"name":"Lily","comment":"Not bad"}]
d3.nest()
.key(function(el) {return el.name})
.entries(users);
/*(2) [{…}, {…}]
0: {key: "tom", values: Array(2)}
1: {key: "Lily", values: Array(1)} */

3. Data-binding

var arr = ['a','b','c','d']
    d3.select("body").selectAll("div.cities")
.data(arr)
.enter()
.append("div")
.attr("class","cities")
.html(function(d,i) { return d; });

arr = ['a','b']

d3.select("body").selectAll("div.cities")
.data(arr)
.exit()
.style("color","red")
.html(function(d,i) { return d+i; });

selectAll()的div.cities的标签可以不存在，这样就是一个empty selection，绑定一个数组是将每一个元素绑定到标签上。Dom元素比数组元素少的会触发enter()，多余的会触发exit()。
document.getElementsByClassName("cities")[0].__data__用这个就可以取到Dom元素绑定的数据了。
上面的效果是先加了4个div,再除前两个之外的设置为红色。
select()只是选择，添加Dom，设置属性都要调用对应函数来实现。