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这片充满活力的绿洲.我决定在这块宝地贪婪地大餐一番. 本文介绍主要来自官网翻译及用户使用后感想资 ...

随机推荐

前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事
一.条件分支语句条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
excel2json
原文链接在游戏项目中一般都需要由策划制作大量的游戏内容,其中很大一部分是使用Excel表来制作的.于是程序就需要把Excel文件转换成程序方便读取的格式. 之前项目使用的Excel表导入工具都是通过 ...
GIt -- fatal: refusing to merge unrelated histories 问题处理
今晚碰到这个问题-- fatal: refusing to merge unrelated histories 想了一下,为什么就这样了? 因为我是先本地创建了仓库,并添加了文件,然后再到github ...
对oracle用户创建asm磁盘
--root用户执行vi /etc/sysctl.conf #Install oracle settingfs.aio-max-nr = 1048576fs.file-max = 6815744#ke ...
LeetCode 14.Longest Common Prefix(C++)
最长公共前缀问题,考虑没有或只有一个字符串的情况,然后只需要逐个比对就可以了. class Solution { public: string longestCommonPrefix(vector&l ...
NOIP2018Day1T2 货币系统
题目描述在网友的国度中共有 \(n\) 种不同面额的货币,第 \(i\) 种货币的面额为 \(a[i]\),你可以假设每一种货币都有无穷多张.为了方便,我们把货币种数为 \(n\).面额数组为 \( ...
windows安装node和yarn
Ubuntu子系统安装和删除yarn 在 Debian 或 Ubuntu 上,需要用 Debian 包仓库来安装 Yarn. 首先需要配置仓库: curl -sS https://dl.yarnpkg ...
About Why Inline Member Function Should Defined in The Header File
About why inline member function should defined in the header file. It is legal to specify inline on ...
Caused by: java.lang.IllegalStateException: RedisConnectionFactory is required
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'redisTemplat ...
数据分析入门——Pandas类库基础知识
使用python进行数据分析时,经常会用Pandas类库处理数据,将数据转换成我们需要的格式.Pandas中的有两个数据结构和处理数据相关,分别是Series和DataFrame. Series Se ...

d3.js做的柱状图

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

随机推荐

热门专题