d3.js做的柱状图

window.onload = function(){

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var height = 400,width = 900;

var padding = {left:30, right:30, top:20, bottom:20};

var rectPadding = 4;

var svg = d3.select("#main").append("svg").attr("height",height).attr("width",width);

////////设置ｘ轴比例尺(构造一个序数比例尺)/////////////

var x = d3.scale.ordinal()

var xScale = x.domain(d3.range(dataArray.length))

.rangeRoundBands([0,width-padding.left-padding.right]);

////////创建新的轴生成器///////////

var xAxis = d3.svg.axis()

.scale(xScale)

.orient('bottom');

svg.append("g")

.attr("transform","translate(" + padding.left + "," + (height-padding.top) + ")")

.attr("class","axis")

.call(xAxis);

////////y轴的比例尺(构建一个线性比例尺)///////////

var yScale = d3.scale.linear()

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

.range([height - padding.top - padding.bottom, 0]);

////////创建新的轴生成器/////////////////////

var yAxis = d3.svg.axis()

.scale(yScale)

.orient('left');

svg.append('g')

.attr("transform","translate(" + padding.left + "," + padding.top + ")")

.attr("class","axis")

.call(yAxis)

////////添加矩形//////////////////////////////////////////////////////

var rect = svg.selectAll("rect")

rect.data(dataArray).enter().append("rect")

// .attr("height",function(d,i){return d*10})

// .attr("width",xScale.rangeBand() - rectPadding)

.attr("transform","translate(" + padding.left + "," + padding.top + ")")

.attr("x",function(d,i){return xScale(i)+rectPadding/2})

.attr("y",function(d,i){return yScale(d)})

.attr("height",function(d){return height-padding.bottom-padding.top-yScale(d)})

.attr("width",xScale.rangeBand()-rectPadding)

//////////添加文字/////////////

svg.selectAll(".text").data(dataArray)

.enter().append("text")

.attr("class","bar-text")

.attr("x",function(d,i){return xScale(i)+rectPadding/2})

.attr("y",function(d){return yScale(d)})

.attr("transform","translate(" + padding.left + "," + padding.top + ")")

.attr("dx",function(){return (xScale.rangeBand() - rectPadding)/2})

.attr("dy",function(){return -5})

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

svg.selectAll("rect").attr('fill','blue')

.attr('style','cursor:pointer')

.on('mouseover',function(d,i){

d3.select(this)

.attr('fill','yellow')

})

.on('mouseout',function(){

d3.select(this)

.transition()

.duration(500)

.attr('fill','blue')

})

}

／／／／／／／／／／／／／／／／／／／／／／／／／／／／ｊｓ部分

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!-- <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red" />

<polygon points="100,20 20,90 60,160 140,160 180,90"

style=" fill:LawnGreen; stroke:black; stroke-width:3 "/>

I am <tspan fill="yellow">programmer</tspan>

</text>

</svg> -->

</div>

</body>

</html>

／／／／／／／／／／／／／／／／／／／／／／ｃｓｓ

body{

margin:0px;

padding:0px;

}

#main{

margin-top:20px;

}

.bar{

fill:blue;

stroke-width:1px;

}

.bar:hover{

cursor: pointer;

}

.bar-text{

fill:red;

text-anchor:middle

}

.axis path,.axis line{

fill: none;

stroke: black;

shape-rendering: crispEdges;

}

/////////////////////建议可以结合ＡＰＩ来看，诗诗看的晕的不行，还好左后做出来了

下面我挑几个我做的时候遇到的不懂的地方．

.axis path,.axis line{

fill: none;

stroke: black;

shape-rendering: crispEdges;

}
这些其实是最后渲染的时候改变ｘ,y轴的样式东西．

var x = d3.scale.ordinal()这句是构造一个序数比例尺，

.domain(d3.range(dataArray.length));d3.range(9)会得到一个数组［０，１，２，３，４，５，６，７，８］

获取或指定比例尺的输入域。这句ｄｏｍａｉｎ我的理解是，给定这些宽度的一个输入域

有种自适应的感觉．.scale()j就是一个函数里面放的就是x,y轴的(具体里面发生了什么我也不清楚)；
.call()这句有种渲染的感觉．

d3.js做的柱状图的更多相关文章

D3.js 做一个简单的图表（条形图）
柱形图是一种最简单的可视化图标,主要有矩形.文字标签.坐标轴组成. 本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图. 一. 画布是什么前几章的处理对象都是 HTML ...
【 D3.js 入门系列 --- 3 】做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
MOOC课程信息D3.js动态可视化
版权声明:本文为博主原创文章,转载请注明出处:https://blog.csdn.net/sc2079/article/details/83153693 - 写在前面好久没更新博客了,主要还是最近 ...
d3.js 教程模仿echarts柱状图
由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的.今天在echarts找到了 ...
d3.js多个x轴y轴canvas柱状图
最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...
页面生成柱状图 --- D3.js
转载自:https://www.cnblogs.com/fastmover/p/7779660.html D3.js从入门到"放弃"指南前言近期略有点诸事不顺,趁略有闲余之时, ...
D3.js的v5版本入门教程（第九章）——完整的柱状图
D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...
D3.js 之 d3-shap 简介（转）
[转] D3.js 之 d3-shap 简介译者注原文: 来自 D3.js 作者 Mike Bostock 的 Introducing d3-shape 译者: ssthouse 联系译者: 邮箱 ...
D3.js 整体展示篇
近期一段时间研究社会成员网络关系图的一些可视化展示,对大数据可视化这片荒漠一筹莫展的自己,幸好发现了D3这片充满活力的绿洲.我决定在这块宝地贪婪地大餐一番. 本文介绍主要来自官网翻译及用户使用后感想资 ...

随机推荐

WebApi-1 与MVC路由机制比较
在MVC里面,默认路由机制是通过url路径去匹配对应的action方法 public class RouteConfig { public static void RegisterRoutes(Rou ...
【转载】npm查看全局安装过的包
在使用node的时候,用npm安装了很多软件,过一段时间没有使用就会忘记,怎么查看自己全局安装过的包,用命令 npm list -g --depth 在百度里搜不到结果的,我在google里老外的文章 ...
MyOD(课下作业，选做)
MyOD(课下作业,选做) 代码要求编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.b ...
.net core 利用日志查看ef生成的SQL语句
EF Core 没有直接提供像 EF6 那样方便的在日志中记录最终生成的 SQL 的功能,可以通过官方提供的日志记录(Microsoft.Extensions.Logging)实现. 一. 使用 Mi ...
.net基础学java系列（六）Java基础
一.废话 .net学java为何一直没入坑?其实大家都知道,语法很相似,就是使用的习惯不同稍微的语法差异结构体系不同 IDE不同类库集不同各种框架不同对于我来说,我一直被第三道坎拦住了,所以 ...
java.util.ConcurrentModificationException 记一次坑
集合在单线程,一个循环内,有添加又删除会出现此异常. 多线程时,在不同的循环操作同一个集合,会出现此异常. 因为,集合长度发生改变时,在迭代器未结束前,迭代器的大小不会发生变化. 1.保证在同一个进程 ...
Python 实现auto linlink 连连看
先上知乎上大神所写: 你看过/写过哪些有意思的代码? 然后别急着看blog,玩一把游戏再说! 看知乎评论,有人说他用了一个下午时间就写出来了. wo kao!!! 我断断续续写了一周的下午才搞定,然后 ...
Docker 学习2 Docker基础用法
一.docker架构 1.client端 2.server端,docker daemo守护进程,监听在套接字之上.docker支持三种类型套接字. a.ip vs套接字:即IP + 端口套接字 b.i ...
java-数组排序--计数排序、桶排序、基数排序
计数排序引入不难发现不论是冒泡排序还是插入排序,其排序方法都是通过对每一个数进行两两比较进行排序的,这种方法称为比较排序,实际上对每个数的两两比较严重影响了其效率,理论上比较排序时间复杂度的最低下限 ...
EJS 入门学习
EJS(Embedded JavaScript templates)是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本.可以说EJS是一个JavaScript库,EJS可以同时运行在客 ...

d3.js做的柱状图

d3.js做的柱状图的更多相关文章

随机推荐

热门专题