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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/d3/d3.min.js"></script>
<script src="./js/d3-1.js"></script>
<link rel="stylesheet" href="./css/d3-1.css"/>
</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 "/>
<ployline points="100,20 20,90 60,160 140,160 180,90" style="fill:white;stroke:black;stroke-width:3" transform="translate(200,0)" />
<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
I am <tspan fill="yellow">programmer</tspan>
</text>
</svg> -->
<div id="main">
</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做的柱状图的更多相关文章

  1. D3.js 做一个简单的图表（条形图）

    柱形图是一种最简单的可视化图标,主要有矩形.文字标签.坐标轴组成. 本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图. 一. 画布是什么 前几章的处理对象都是 HTML ...

  2. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  3. MOOC课程信息D3.js动态可视化

    版权声明:本文为博主原创文章,转载 请注明出处:https://blog.csdn.net/sc2079/article/details/83153693 - 写在前面 好久没更新博客了,主要还是最近 ...

  4. d3.js 教程 模仿echarts柱状图

    由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的.今天在echarts找到了 ...

  5. d3.js多个x轴y轴canvas柱状图

    最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...

  6. 页面生成柱状图 --- D3.js

    转载自:https://www.cnblogs.com/fastmover/p/7779660.html D3.js从入门到"放弃"指南 前言 近期略有点诸事不顺,趁略有闲余之时, ...

  7. D3.js的v5版本入门教程（第九章）——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  8. D3.js 之 d3-shap 简介（转）

    [转] D3.js 之 d3-shap 简介 译者注 原文: 来自 D3.js 作者 Mike Bostock 的 Introducing d3-shape 译者: ssthouse 联系译者: 邮箱 ...

  9. D3.js 整体展示篇

    近期一段时间研究社会成员网络关系图的一些可视化展示,对大数据可视化这片荒漠一筹莫展的自己,幸好发现了D3这片充满活力的绿洲.我决定在这块宝地贪婪地大餐一番. 本文介绍主要来自官网翻译及用户使用后感想资 ...

随机推荐

  1. tensorflow--交叉熵

    学而不思则罔,思而不学则怠. 最近在看<TensorFlow 实战Google深度学习框架第二版>这本书.从头开始学习深度学习,对于细节方面进行探究.相当于重新拾起来这门”手艺“. 这篇随 ...

  2. Revit二次开发 推荐

    学习revit二次开发,建议还是先把revit熟悉一下,去建立一下模型,亲自感受一下是如何创建模型的流程,其中会遇到什么问题.这样在自己做二次开发的时候,一些问题自己就能提前想到,规避掉.我大概用了半 ...

  3. Java 批量修改文件夹里面的文件的名字

    背景:公司要求使用PADS完成原理图设计.PCB Layout.而他硬件工程师要求我在将PADS的库文件发送给他们之前,必须在每一个库文件的后面追加今天的日期,再发送给他们. 问题来了,如果一次需要发 ...

  4. 2018-2019-2 网络对抗技术 20165323 Exp4 恶意代码分析

    一.原理与实践说明 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,s ...

  5. Anaconda安装python tensorflow 环境

    1.安装Anaconda3 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 2.安装python 3.6 (base) C:\Users\ ...

  6. 不用框架，原生使用python做注册接口/登陆接口/充值接口的测试，做的数据/代码分离

    注意充值时候,cookie的处理方法,还是原来的三种方法 1.操作数据文件  do_exclel.py # -*- conding:utr-8 -*- #@Time :2018/11/8 22:46 ...

  7. Schedule Problem spfa 差分约束

    题意:有n个任务,给出完成n个任务所需时间,以及一些任务安排.任务安排有四种: FAS a b:任务a需在任务b开始后完成. FAF a b:任务a需在任务b完成后完成. SAF a b:任务a需在任 ...

  8. [转]玩转图片Base64编码

    转自:[前端攻略]:玩转图片Base64编码 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 ...

  9. Spring Cloud微服务笔记（五）Feign

    Feign 一.Feign概述 Feign是一个声明式的Web Service客户端.在Spring Cloud 中使用Feign,可以做到 使用HTTP请求访问远程服务,就像调用本地方法一样,同时它 ...

  10. [开源] C# 封装 银海医保的接口

    Github 地址: https://github.com/zifeiniu/YinHaiYiBaoCSharpAPI C#Model封装 银海医保的接口 介绍 银海医保的接口我就不说了,很多家医院在 ...