使用D3绘制图表（6）--竖直柱状图表

　　竖直柱状图的绘制是在水平柱状图的基础上修改的。

　　1.html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="container"></div></body><script type="text/javascript" src="js/d3.js" ></script><script type="text/javascript" src="js/shuzhuangtu.js" ></script>
</html>

　　2.js代码

var data = [1,3,4,6,2,9,7,3,8],
bar_width = 50,
bar_padding = 10,
svg_height = 500,
svg_width = (bar_width +bar_padding)*data.length;var scale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([svg_height, 0]);var svg = d3.select("#container")
.append("svg")
.attr("width", svg_width)
.attr("height", svg_height)var bar = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform",function(d, i){return "translate("+i*(bar_width+bar_padding)+", 0)"})bar.append("rect")
.attr({"y":function(d){return scale(d);},"width":bar_width,"height":function(d){return svg_height-scale(d);}
})
.style("fill","cornflowerblue")bar.append("text")
.text(function(d){return d;})
.attr({"y":function(d){return scale(d)},"x":bar_width/2,"dy":15,"text-anchor":"middle"
})

　　3.运行效果

转载于:https://www.cnblogs.com/wgl1995/p/5593681.html

使用D3绘制图表（6）--竖直柱状图表相关推荐

QT绘制嵌套的圆饼状图
QT绘制嵌套的圆饼状图项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介使用QPieSeries API创建嵌套的甜甜圈图. 项目技术 qt5.12,qt chart ...
d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...
Pyecharts：pyecharts(图文+代码)实战(柱状图/条形图/散点图、漏斗图、仪表盘、折线/面积图、水球图、地图、平行坐标系、饼图、极坐标系、雷达图、词云图)之绘制各种吊炸天的图表
Pyecharts:pyecharts(图文+代码)实战(柱状图/条形图/散点图.漏斗图.仪表盘.折线/面积图.水球图.地图.平行坐标系.饼图.极坐标系.雷达图.词云图)之绘制各种吊炸天的图表目录 ...
[知识图谱实战篇] 八.HTML+D3绘制时间轴线及显示实体
前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术.Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例.为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏 ...
用Jfree实现条形柱状图表，java代码实现
用Jfree实现条形柱状图表,java代码实现.可经经常使用于报表的制作,代码自己主动生成后能够自由查看.能够自由配置图表的各个属性,用来达到自己的要求和目的 package test1;import ...
手把手教会|绘制风控中常用的可视化图表
在日常办公时,数据可视化是一项比较重要的事情,图表传达的信息有时候会比数字更加直观,更加具有说服力. 在金融领域,各种产品在贷前.贷中.贷后等各个流程中都会产生大量的数据,这时就会涉及到各种各样的数据 ...
Plotly中绘制三种经典的股票交易图表（含视频讲解）
作者:Lemon 来源:Python数据之道 Plotly中绘制三种经典的股票交易图表(含视频讲解) 大家好,我是 Lemon . 背景前一段时间, Lemon 发了一期视频,分享了 Plotly ...
第五章. 可视化数据分析图表—常用图表的绘制4—箱形图，3D图表
第五章. 可视化数据分析图 5.3 常用图表的绘制4-箱形图,3D图表本节主要介绍常用图表的绘制,主要包括箱形图,3D柱形图,3D曲面图. 1.箱形图(matplotlib.pyplot.boxpl ...
jQuery+d3绘制流程图
jQuery + d3绘制流程图运行效果代码 HTML代码 <!DOCTYPE html> <html style="overflow: hidden;"&g ...
D3 - 绘制条形统计图
D3绘制简单条形统计图效果图: (图中箭头出表示鼠标位置,交互显示位置处的矩形) 完整代码: <body> <script src="https://d3js.org/d ...

使用D3绘制图表（6）--竖直柱状图表

使用D3绘制图表（6）--竖直柱状图表相关推荐

最新文章

热门文章