使用d3画一些基本的图形

标签：数据   柱状图   linear   com   图表   end   mamicode   ext   lin   

<div id="container">
</div>

可以加个样式
<style>
#container{
width:600px;
height:400px;
background:#ccc;
}
</style>
引入d3.min.js文件

<script src="./d3.min.js"></script>

<script>
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+")")
</script>

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

折线图
//要展示的数据(学生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)

饼状图

  //饼状角度生成器
  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)+")"
  })

使用d3画一些基本的图形

标签：数据   柱状图   linear   com   图表   end   mamicode   ext   lin   

原文地址：https://blog.51cto.com/5493817/2524812