【D3使用教程】(2) 绘制柱状图与散点图
（1）绘制一幅柱状图
严格来说，柱形图是指矩形沿垂直方向度量的图形；条形图，是沿水平方向度量的图形。多数时候我们常常没有区分这两个概念。
首先我们来尝试绘制一幅柱状图。
注：开始之前，先在页面中引入jquery和d3.js文件。
<style>
div.bar {
display: inline-block;
width: 20px;
height: 75px;
margin-right: 2px;
background-color: teal;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
<script>
//D3.js code
let dataset = [4,19,15,20,25];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class","bar")
.style("height",function(d){
return d + "px";
});
</script>这里，通过attr()给每个div添加bar类。使用style()修改每个div的高度。
dataset中的数据会赋值给d,也就是说高度会依据d 的值而不同。这也说明了数据驱动可视化。
（2）绘制SVG
关于SVG元素，最关键是要记住它们的各个方面都是通过属性来设定的。也就是说，通过标签中的属性/值对 来指定SVG元素的各方面特征。
由此可见，要生成SVG图形，仍然要使用append()和attr()方法来分别用于创建HTML元素和设定它们的属性。
现在我们来创建SVG图形。
let w = 500;
let h = 100;
let barPadding = 5;
let svg = d3.select("body").append("svg").attr("width",w).attr("height",h);//把append()返回的新元素保存在了变量svg中
let dataset = [5,10,15,20,25];
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx",function(d,i){
return (i*50)+25;
})
.attr("cy",h/2)
.attr("r",function(d){
return d;
})
.attr("fill","yellow")
.attr("stroke","orange")
.attr("stroke-width",function(d){
return d/2;
});这里 cx,cy 分别是圆形的x与y坐标。
**i : 是当前元素的索引值。**这个值从0开始。为了在自定义函数里使用这个索引，必须记住，要把它作为函数的参数。当然，不一定要命名为i。
多值映射
我们注意到，在方法链上已经调用了多次attr()。 这是挺麻烦的事。D3多值映射机制，能让你一次性设置多个值。 示例：
attr({cx:0,cy:0,fill:"red"});如何把上面创建SVG的例子改写，可写成这样：
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x:function(d,i){return i* (w/dataset.length);},
y:function(d){return h-(d*4);},
width: w/dataset.length - barPadding,
height: function(d){return d*4;},
fill: function(d){return "rgb(0,0,"+(d*10)+")";}
});类似地，我们还能将应用在attr()上的多值映射机制应用到style()等其他一些方法上。
标签
通常，你可能想在你的条形图上显示实际的数据值。
**记住一点，怎么添加矩形，就怎么添加文本。**接着上面的例子，这里用到text()方法，添加如下：
svg.selectAll("text")
.data(dataset)
.enter()
.append('text')
.text(function(d){
return d;
})
.attr({
x:function(d,i) {
return i * (w/dataset.length)+40;
},
y:function(d){return h-(d*4)+14;},
fill:"red",
});
散点图
相比之前，我们绘制的是简单地一维数据值，当我们有两组数据时，需要相互照绘制时，那就需要用到第二维。其中，散点图是常见的二维数据图表。
接下来，我们先定义一个二维数据集：
let dataset = [
[5,20],// [x,y]
[480,90],
[250,50],
[100,33],
[330,95],
[410,12],
[475,44],
[25,67],
[85,21],
[220,88]
];然后我们尝试绘制散点图。
由于我们这里的散点中点是圆形，所以，我们要创建圆形。当然，你也可以创建矩形作为散点。
示例：
let w = 600;
let h = 100;
let dataset = [
[5,20],
[480,90],
[250,50],
[100,33],
[330,95],
[410,12],
[475,44],
[25,67],
[85,21],
[220,88]
];
let svg = d3.select("body")
.append("svg")
.attr({
width:w,
height:h
});
//添加散点
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr({
cx:function(d){return d[0];},// d[0] dataset中x的值
cy:function(d){return d[1];},// d[1] dataset中y的值
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({
fill : "black",
x : function(d) {return d[0]+10;},//将标签与散点位置一一对应
y : function(d) {return d[1];}
})
.style("font-size", "11px");
目前为止，我们只是简单地利用D3 绘制了SVG,并且绘制的散点图还是有点“僵硬”_，下一节，我们会通过比例尺的方式，更加形象地表现我们的绘图。
腾讯云开发者
