云社区 博客 博客详情

使用d3画一些基本的图形

不鸭冲鸭 发表于 2020-08-27 20:39:51 2020-08-27
0
0

【摘要】 生成图标需要有四个步骤1生成图片容器2设置比例尺3生成数据图表4生成坐标系在展示图表时一般要有个容器,我们可以使用.container类,同时制定宽高。如下:可以加个样式#container{width:600px;height:400px;background:#ccc;}引入d3.min.js文件varwidth=600,height=400//设置svg的宽和高varma...

生成图标需要有四个步骤
1生成图片容器
2设置比例尺
3生成数据图表
4生成坐标系
在展示图表时一般要有个容器,我们可以使用.container 类,同时制定宽高。如下:
使用d3画一些基本的图形


可以加个样式

引入d3.min.js文件

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

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

文章来源: blog.51cto.com,作者:biekeqi_zaowei,版权归原作者所有,如需转载,请联系作者。

原文链接:https://blog.51cto.com/5493817/2524812

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:PostgreSQL学习的九层宝塔

下一篇:d3.js的基础使用

评论 (0)


登录后可评论,请 登录注册

评论