绘制水平柱状图表的方法也不是很难，首先在svg中插入g，然后在g中插入rect。

　　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_height = 50,

bar_padding = 10,

svg_width = 500,

svg_height = (bar_height +bar_padding)*data.length;

var scale = d3.scale.linear()

.domain([0, d3.max(data)])

.range([0, svg_width]);

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(0, "+i*(bar_height+bar_padding)+")"})

bar.append("rect")

.attr({

    "width":function(d){return scale(d);},

    "height":bar_height

})

.style("fill","cornflowerblue")

bar.append("text")

.text(function(d){return d;})

.attr({

    "x":function(d){return scale(d)},

    "y":bar_height/2,

    "text-anchor":"end"

})

　　3.运行效果

使用D3绘制图表（5）--水平柱状图表的更多相关文章

  1. 用Jfree实现条形柱状图表，java代码实现

    用Jfree实现条形柱状图表,java代码实现.可经经常使用于报表的制作,代码自己主动生成后能够自由查看.能够自由配置图表的各个属性,用来达到自己的要求和目的 package test1; impor ...

  2. 基于 WebGL 的 3D 动态柱状图表

    发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易 ...

  3. 使用D3绘制图表（7）--饼状图

    这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...

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

    竖直柱状图的绘制是在水平柱状图的基础上修改的. 1.html代码 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  5. 用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果

    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...

  6. 用canvas 绘制的饼状统计图、柱状统计图、折线统计图

    canvas 绘制的饼状统计图 canvas 绘制的柱状统计图 canvas 绘制的折线统计图

  7. ECharts图表之柱状折线混合图

    Echarts 官网主页  http://echarts.baidu.com/index.html Echarts 更多项目案例  http://echarts.baidu.com/echarts2/ ...

  8. Python的可视化包 – Matplotlib 2D图表(点图和线图,.柱状或饼状类型的图),3D图表(曲面图，散点图和柱状图)

    Python的可视化包 – Matplotlib Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型地2D图表和一些基本的3D图表.Matplotlib最早是为了可 ...

  9. 使用D3绘制图表（2）--绘制曲线

    上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. AngularJS几个基础概念

    作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方.作用域是视图和作用域之间的胶水.在应用将视图渲染并呈现 ...

  2. [麦先生]TP3.2之微信开发那点事[基础篇]（微信支付签名算法）

    两种模式:扫码支付和微信内支付(调用js-sdk) trade_type==native即扫码支付,只需要将code_url转成二维码,使用微信扫码即可: js-sdk微信内支付-调用微信js-sdk ...

  3. 平面直接坐标系线段相交问题（小Q（钟神）的问题）

    [问题描述] 小 Q 对计算几何有着浓厚的兴趣.他经常对着平面直角坐标系发呆,思考一些有趣的问题.今天,他想到了一个十分有意思的题目:首先,小 Q 会在?轴正半轴和?轴正半轴分别挑选?个点.随后,他将 ...

  4. UI坐标变换/转换

    InverseTransformPoint Transform.InverseTransformPoint :相对于谁的坐标.如果是相对2D UI,请使用localposition,如果是3D场景,请 ...

  5. OpenSessionInview

    Open Session In View模式的主要思想是:在用户的每一次请求过程始终保持一个Session对象打开着 实现步骤: 步骤一.创建一个Web项目,创建包cn.happy.util,创建Hi ...

  6. MVC 数据验证[转]

    前一篇说了MVC数据验证的例子,这次来详细说说各种各样的验证注解. 一.基础特性 一.Required 必填选项,当提交的表单缺少该值就引发验证错误. 二.StringLength 指定允许的长度 指 ...

  7. HTML 学习笔记(URL)

    URL也被称为网址 URL可以由单词组成,比如"www.baidu.com" 或者是因特网协议IP地址:192.168.1.253.大多数人在网上冲浪时,会键入网址的域名,因为名称 ...

  8. javascript中的链表结构—双向链表

    1.概念 上一个文章里我们已经了解到链表结构,链表的特点是长度不固定,不用担心插入新元素的时候新增位置的问题.插入一个元素的时候,只要找到插入点就可以了,不需要整体移动整个结构. 这里我们了解一下双向 ...

  9. IntelliJ IDEA 打包可运行的 JAR

    ## 构建说明 创建Artifest任务 * File -> Project Structure -> Artifacts -> + JAR* 选择 From module with ...

  10. Hibernate总结3

    一,对象的四种状态 临时状态: 与数据库没有对应,跟Session没有关联. 一般是新new出的对象. 持久化状态: 对象在Session的管理之中,最终会有对应的数据库记录.save saveoru ...