d3.js 简易柱形图，入门demo

    <script>var width = 400;var height = 400;//创建画布var svg = d3.select('body').append('svg').attr('width',width).attr('height',height)var padding = {top:20,left:20,right:20,bottom:20}var rectstep = 35; //矩形的宽带偏白var rectwidth = 30;//矩形的宽var dataset = [216,86,158,76,203]// 根据数据填充矩形var rect = svg.selectAll('rect').data(dataset).enter().append('rect').attr('fill','steelblue').attr('x',function(d,i){return padding.left + i * rectstep;}).attr('y',function(d,i){return height - padding.bottom - d;}).attr('width',rectwidth).attr('height',function(d,i){return d;}) // 根据数据填充文本内容              var text = svg.selectAll('text').data(dataset).enter().append('text').attr('fill','white').attr('x',function(d,i){return padding.left + i * rectstep;}).attr('y',function(d,i){return height - padding.bottom - d;}).attr('text-anchor','middle') .attr('font-size','14px').attr('dx',rectwidth/2).attr('dy','1em').text(function(d,i){return d;})</script>

转载于:https://www.cnblogs.com/webmc/p/11064927.html

d3.js 简易柱形图，入门demo相关推荐

D3.js可视化库入门视频教程
2019独角兽企业重金招聘Python工程师标准>>> D3 是最流行的可视化库之一,它被很多其他的表格插件所使用.它允许绑定任意数据到DOM,然后将数据驱动转换应用到Documen ...
d3.js 共享交换平台demo
今天在群里遇到一张图遂来玩一玩,先来上图!! 点击相应按钮,开关线路,此项目的重点是计算相应图形的位置,由于是个性化项目就没有封装布局.好了直接上代码. <!DOCTYPE html> ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...
高手才知道！七个你所不知道的 D3.js 秘技
D3.js ,当前最火红的视觉化套件,你用过了吗?越来越多人使用 D3.js 来开发视觉化专题,但- 你对 D3.js 的了解又到哪里呢?这次我们就带大家一起来看看一些 D3.js 很重要.大家却又普 ...
d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
数据可视化js框架 d3.js入门
数据可视化js框架 d3.js入门 [一] 选择元素绑定数据 1.下载.引入d3.js 2.d3.select():选择所有指定元素的第一个 3.d3.selectAll() :选择指定元素的全部 e ...
D3.js从入门指南
D3.js从入门指南前言近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置 ...
【D3.js开发入门：绘制图表】静态图表
什么是 D3.js? D3.js是用于 HTML 和 SVG 实现的 JavaScript 可视化库.基于数据操作文档的 JavaScript 库. 说到D3不得不提到Echarts,Echarts和 ...
d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

d3.js 简易柱形图，入门demo

d3.js 简易柱形图，入门demo相关推荐

最新文章

热门文章