生成图标需要有四个步骤

1生成图片容器

2设置比例尺

3生成数据图表

4生成坐标系

在展示图表时一般要有个容器，我们可以使用.container 类，同时制定宽高。如下:

可以加个样式

#container{

width:600px;

height:400px;

background:#ccc;

}

引入d3.min.js文件

var width=600,height=400 //设置svg的宽和高

var margin={top:30,right:30,bottom:30,left:30}//设置图表距离svg元素的距离

var g_width= width - margin.left-margin.right //g元素(图表的宽度)

var g_height= height - margin.top - margin.bottom //g 元素的高

//设置svg元素用来放在整个图表

var svg = d3.select("#container").

.append("svg")

.attr({

width:width,

height:height

})

//设置一个g元素用来放置整个图表，并设置位移(设置这个的目的为了能让坐标系显示出来)，g元素是不能有宽高属性的，里面的子元素什么样子，g元素就是什么样子。

var g = svg.append("g")

.attr("transform","translate("+margin.left+","+margin.top+")")

//以上代码都是公用的，下面就以几个图表为例讲解

折线图

//要展示的数据(学生6次的数学成绩)

var dataset=[

{

month:'1月',

j:60

},

{

month:'2月',

j:70

},

{

month:'3月',

j:73

},

{

month:'4月',

j:54

},

{

month:'5月',

j:69

},

{

month:'6月',

j:74

}

]

//设置x轴比例尺(序数比例尺)

var scaleX=d3.scaleBand()

.domain(dataset.map((item)=>{

return item.month

})).rangeRound([0,g_width])

//设置y轴比例尺(线性比例尺)

var scaleY=d3.scaleLinear()

.domain([0,100])

.range([g_height,0])

//路径生成器(画图)

var line_gen=d3.line()

.x(function(data,index){

return scaleX(data.month)+scaleX.bandwidth()/2

}).y(function(data,index){

return scaleY(data.j)

})

g.append("path").attr("d",line_gen(dataset))

//生成坐标轴

var axisX=d3.axisBottom().scale(scaleX);

var axisY=d3.axisLeft().scale(scaleY);

g.append("g").call(axisX).attr("transform","translate(0,"+g_height+")")

g.append("g").call(axisY)

柱状图

//柱状图的宽度

var bar_width=50

//设置x轴比例尺(序数比例尺)

var scaleX=d3.scaleBand()

.domain(dataset.map((item)=>{

return item.month

})).rangeRound([0,g_width])

//设置y轴比例尺(线性比例尺)

var scaleY=d3.scaleLinear()

.domain([0,100])

.range([g_height,0])

//生成柱状图

//设置每个柱状图的画的位置

var bar_g=g.selectAll("g")

.data(dataset)

.enter()

.append("g")

.attr("transform",function(data,index){

let bandwidth=scaleX.bandwidth()

let x=index*bandwidth+bandwidth/2-bar_width/2

let y=scaleY(data.j)

return 'translate('+x+','+y+')'

})

//画对应的柱状图

bar_g.append("rect")

.attr("width",bar_width)

.attr("height",function(data){

return scaleY(100-data.j)

}).attr("fill","blue")

bar_g.append("text").text(function(data){

return data.j

}).attr("x",function(data){

return bar_width/2

})

//生成坐标轴

var axisX=d3.axisBottom().scale(scaleX);

var axisY=d3.axisLeft().scale(scaleY);

g.append("g").call(axisX).attr("transform","translate(0,"+g_height+")")

g.append("g").call(axisY)

面积图

var scaleX=d3.scaleBand()

.domain(dataset.map((item)=>{

return item.month

})).rangeRound([0,g_width])

//设置y轴比例尺(线性比例尺)

var scaleY=d3.scaleLinear()

.domain([0,100])

.range([g_height,0])

//区域生成器

var area_gen=d3.area()

.x(function(data,i){

return scaleX(data.month)

}).y(function(data){

return scaleY(data.j)

})

.y0(g_height)

.y1(function(data){

return scaleY(data.j)

})

g.append("path").attr("d",area_gen(dataset))

.style("fill","blue")

//生成坐标轴

var axisX=d3.axisBottom().scale(scaleX);

var axisY=d3.axisLeft().scale(scaleY);

g.append("g").call(axisX).attr("transform","translate(0,"+g_height+")")

g.append("g").call(axisY)

饼状图

//圆弧生成器

let arc=d3.arc()

.innerRadius(100)

.outerRadius(200)

//饼状角度生成器

var angle=d3.pie().value(function(d){ return d.j})

//颜色生成器

var color=d3.schemeCategory10

//生成饼状图

g.selectAll("path")

.data(angle(data))

.enter()

.append("path")

.attr("d",arc).attr("fill",function(data,i){

return color[i]

})

//添加文字

g.selectAll("text")

.data(angle(data))

.enter()

.append("text")

.text(function(item){

return item.data

}).attr("transform",function(d){

return "translate("+arc.centroid(d)+")"

})