使用d3.js动态获取数据文件，并进行垂直柱状图表渲染

最新推荐文章于 2021-05-25 16:47:23 发布

xinxiaoyong

最新推荐文章于 2021-05-25 16:47:23 发布

阅读量1.6k

点赞数

分类专栏： svg画图文章标签： d3.js 动态渲染数据 d3.js 动态获取数据文件 d3.js 动态数据交互

本文链接：https://blog.csdn.net/xinxiaoyonng/article/details/106654170

版权

svg画图专栏收录该内容

7 篇文章 2 订阅

订阅专栏

一、最终效果截图：

二、动态返回的原始数据：

三、数据描述：

本地请求数据的名字：d3-data.csv

HTML文件与d3-data.csv文件位置关系：在同一目录级别。

本地请求数据的内容：必须一行一条数据。

year,population
1953,5.94
1964,6.95
1982,10.08
1990,11.34
2000,12.66
2010,13.40

数据详情截图：

四、代码详情：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>d3获取动态数据文件并进行图表渲染</title>
   </head>
   <body>
       <div id="container"></div>
       <script type="text/javascript" src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
       <script type="text/javascript">
           // 语法：d3.csv(url 数据文件路径,callback 回调函数) 类似ajax()
           d3.csv('./d3-data.csv',type,function(data1){
               console.log(data1,'数据')
               // 定义柱形图数据回调函数返回的data
               var data = data1
               // 定义每个柱形图之间的间隙和高度
               var barWidth = 50
               var barPadding = 10
               var svgHeight = 500
               //计算svg的高度
               var svgWidth = (barWidth+barPadding)*data.length

               // 定义线性缩放
               var scale = d3.scale.linear()
                       .domain([0,d3.max(data,function(d){ return d.population}) ])
                       .range([svgHeight,0])
               var svg = d3.select('#container')// 容器元素选择,
                   .append('svg') //并向其内添加一个svg元素。
                   .attr('width',svgWidth) //设置宽高
                   .attr('height',svgHeight)

               var bar = svg.selectAll('g') //选择所有g元素
                       .data(data) //使用.data()进行图形数据绑定
                       .enter() //追加插入g DOM元素
                       .append('g')
                       .attr('transform',function(d,i){ return 'translate('+i*(barWidth+barPadding)+',0)'})

               // 定义矩形
                   bar.append('rect')
                       .attr({
                           'y': function(d){ return scale(d.population)},
                           'width': barWidth,
                           'height':function(d){ return svgHeight-scale(d.population)}
                       })
                       .style('fill','#4682B4')

                   bar.append('text')
                       .text(function(d){ return d.year})
                       .attr({
                           'y':function(d){ return scale(d.population)},
                           'x':barWidth/2,
                           'text-anchor': 'end' //设置文字对齐属性
                       })
           })

           // population数据类型转换: String -> Number
           function type(d){
               d.population = +d.population
               return d
           }
       </script>
   </body>
</html>

xinxiaoyong

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
4
评论
使用d3.js动态获取数据文件，并进行垂直柱状图表渲染

一、最终效果截图：二、动态返回的原始数据：三、数据描述：本地请求数据的名字：d3-data.csvHTML文件与d3-data.csv文件位置关系：在同一目录级别。本地请求数据的内容：必须一行一条数据。year,population1953,5.941964,6.951982,10.081990,11.342000,12.662010,13.40 数据详情截图：四、代码详情：<!DOCTYPE html><htm...
复制链接

扫一扫