d3画图表

d3画图表的教程好少， 从极客学院上看到了http://wiki.jikexueyuan.com/project/d3wiki/ 但是它这是v3的，我用的是v4，有些东西居然不一样了

选择标签， 给标签赋值

选择单个标签

直接通过标签获取元素
var p = d3.select(“p”)

通过id获取
var p = d3.select(“#myp”)

通过class获取
var p = d3.select(“.myp”)

为单个标签设值
p.text(“hello”)

---

选择所有p标签
var p = body.selectAll(‘p’)

为所有标签设值
1.使用datum()

p.datum(str) //与p标签进行绑定p.text(function(d){ //d表示通过 datum绑定的值    return  d;});

函数还可以这么写

p.datum(str) //与p标签进行绑定p.text(function(d, i){ //d表示通过 datum绑定的值，i 表示 当前的第几个p    return  "第"+i+"个值"+d;});

2.使用data()

//使用datas数组值挨个赋值给p标签var datas = ['var1','var2','var3'];p.data(datas).text(function(d, i){    return d;})

给标签设置style

var p = d3.select("p")p.style("color","red").style("font-size","70px")  //链式选择， 还是属于p的设置

插入元素

1.append()
在body的最后添加一个p标签

var body = d3.select("body")body.append("p").text("new p");

2.insert()
在body中 选择在id为p4的标签的前面插入一个p标签

body.insert("p","#p4").text("insert p")

删除元素

remove()

//把id为p2的移除var p2 = d3.select("#p2");p2.remove()

画直方图

var width = 300;  //画布的宽度var height = 300;   //画布的高度var svg = d3.select("body")     //选择文档中的body元素    .append("svg")          //添加一个svg元素    .attr("width", width)       //设定宽度    .attr("height", height);    //设定高度var dataset = [ 123 , 221 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)//x 20, y 25增长， w来自数据 h23 svg.selectAll("rect") //选择svg内的矩形    .data(dataset) //绑定数组    .enter()    .append("rect") //添加到svg        //设置属性,    .attr("x",20)    .attr("y",function(d,i){         return i * rectHeight; //计算第几个柱子的y坐标位置    })    .attr("width",function(d){         return d;    })    .attr("height",rectHeight-10)    .attr("fill","steelblue"); //填充

比例尺

将数组的值按照比例规划

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];var min = d3.min(dataset); //数组中最大的 3.3var max = d3.max(dataset); //最小的 0.9//domain相当于定义域， range相当于值域var linear = d3.scaleLinear().domain([min,max]).range([0,300]);  alert(linear(0.9))    //返回 0alert(linear(2.3))    //返回 175alert(linear(3.3))    //返回 300

序列比例尺:

两个数组进行值的对应

var index = [0, 1, 2, 3, 4];var color = ["red", "blue", "green", "yellow", "black"];var ordinal = d3.scaleOrdinal()        .domain(index)        .range(color);alert(ordinal(0)); //返回 redalert(ordinal(2)) //返回 greenalert(ordinal(4)) //返回 black

使用比列尺画直方图

var width = 300;  //画布的宽度var height = 300;   //画布的高度var svg = d3.select("body")     //选择文档中的body元素    .append("svg")          //添加一个svg元素    .attr("width", width)       //设定宽度    .attr("height", height);    //设定高度var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];var linear = d3.scaleLinear()        .domain([0, d3.max(dataset)])        .range([0, 250]);var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)svg.selectAll("rect")    .data(dataset)    .enter()    .append("rect")    .attr("x",20)    .attr("y",function(d,i){         return i * rectHeight;    })    .attr("width",function(d){         return linear(d);   //在这里用比例尺    })    .attr("height",rectHeight-2)    .attr("fill","steelblue");

带坐标轴的直方图

var width = 300;  //画布的宽度var height = 300;   //画布的高度var svg = d3.select("body")     //选择文档中的body元素    .append("svg")          //添加一个svg元素    .attr("width", width)       //设定宽度    .attr("height", height);    //设定高度var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];var linear = d3.scaleLinear()        .domain([0, d3.max(dataset)])        .range([0, 250]);var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)svg.selectAll("rect")    .data(dataset)    .enter()    .append("rect")    .attr("x",20)    .attr("y",function(d,i){         return i * rectHeight;    })    .attr("width",function(d){         return linear(d);   //在这里用比例尺    })    .attr("height",rectHeight-2)    .attr("fill","steelblue");alert(12)var axis = d3.axisBottom()            .scale(linear)      //指定比例尺            .ticks(7);          //指定刻度的数量svg.append("g")    .attr("transform","translate(20, 140)") //调整位置    .call(axis);