D3 JS API之基础操作篇（一）

D3.js 的 SelectAll 方法:
1,D3.js中的selectAll方法使用的是CSS3中的选择器来获取DOM元素。不同于select方法（该方法获取的是第一个目标元素），
而selectAll方法选择的是所有匹配的元素

D3.js的data操作符(operator):
1,data操作符是把一个数据数组（可能是数值数组、对象数组或者别的什么数组）与当前的选择结果联系（join）起来
2,Data数组中的每一个元素都被分配到当前选择结果中的一个元素上

D3.js的Virtual Selections:
1,data操作符返回的是三个Virtual selection: enter,update,exit。
2,enter选集：对所有缺失的元素以占位符placeholder替代。
3,update选集：包含现有的元素，并绑定到数据
4,剩下的元素最终都会出现在exit选集中，并被移除。
5,对于数组中的数据元素，如果缺少与之对应的DOM元素，那么就会有一个占位符来顶替，而enter方法返回的就是
这些占位符集合的引用(reference)。得到这个引用之后，就能对该集合操作了。
这个引用后只能链接(chaining)append，insert以及select操作符，通过他们来操作该引用所指向的集合
在这些操作符链接到.enter()选集，我们就可以像处理其他选集那样，来对其内容进行更改。

D3.js的Append操作符:
1,在数据数组中，有多少个数据元素（如1,2,3），.append(“p”)就创建并加入多少个P元素。

D3.js的text操作符:
1,text操作符对所有被选择的元素的textContent属性进行赋值。

D3.js操作符内的可用变量（variable available）:
1,变量d在无名函数中的可用变量。这个变量是由D3.js提供的的，该变量是对要处理的元素的_data_属性的引用。
2,还有另外两个D3.js提供的变量可以用，他们是：this和i。
3,this代表的是当前在处理的DOM元素。
4,i是指当前处理的HTML元素在已选元素选集中的索引值。值得注意的是，所有要处理的数据都是按照一定的次序。注意：i是从0开始的

创建一个 SVG元素 来控制（hold）SVG的元素;
1,var circleRadii = [40,20,10];
2,var svgContainer = d3.select(“body”).append(“svg”).attr(“width”,200).attr(“height”,200);

数据绑定到SVG圆形上:
1,selectAll circle
2,绑定数据
3,选择虚.enter()选集
4,添加SVG的circle元素

5,var circles = svgContainer.selectAll("circle")
                       .data(circleRadii)
                       .enter()
                       .append("circle");

使用绑定的数据来更改SVG圆形:
circleRadii = [40,20,10];

var svgContainer = d3.select("body").append("svg")
                                .attr("width",600)
                                .attr("height",100);

var circles = svgContainer.selectAll("circle")
                      .data(circleRadii)
                      .enter()
                      .append("circle");

var circleAttributes = circles
                   .attr("cx",50)
                   .attr("cy",50)
                   .attr("r",function (d){return d;})
                   .style("fill",function (d){
                     var returnColor ;
                     if (d===40){returnColor = "green";
                     } else if (d===20){returnColor = "purple";
                     } else if (d===10){returnColor = "red";}
                     return returnColor;
                     });

使用SVG坐标空间:
1, var spaceCircles = [30,70,110];

SVG坐标空间

SVG坐标空间与数学图形坐标空间原理基本一样，除了下面两点：

1,SVG坐标空间中，x=0以及y=0的坐标是在左上方。

2,SVG坐标空间中，Y坐标轴的增长方式是自上而下。

创建一个SVG元素来持有SVG的元素:
createSvgElement() {
let spaceCircles = [30, 70, 110];
let svgContainer = d3.select(‘body’).append(‘svg’)
.style(‘width’, 200)
.style(‘height’, 200);

let circles = d3.select('svg').selectAll('circle')
  .data(spaceCircles)
  .enter()
  .append('circle') ;

let circleAttributes = circles.attr('cx', d => d)
  .attr('cy', d => d)
  .attr('r', 20)
  .style('background-color', d => {
    let returnColor = '';
    if (d === 30) {
      returnColor = 'green';
    } else if (d === 70) {
      returnColor = 'purple';
    } else if (d === 110) {
      returnColor = 'red';
    }
    return returnColor;
  });

}

JSON:
var secretAgent = {
“name”:“James Bond”,
“drink”:“dry martini-shaken,not stirred”,
“number”:“007”
};

JSON对象数组:
var jsonCircles = [
{
“x_axis”:30,
“y_axis”:30,
“radius”:20,
“color”:“green”
},{
“x_xis”:70,
“y_xis”:70,
“radius”:20,
“color”:“purple”
},{
“x_axis”:110,
“y_axis”:100,
“radius”:20,
“color”:“red”
}];