[D3] 4. d3.max
how to use d3.max
to normalize your dataset visually within the specific bounds of a variable domain.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../ventor/d3.min.js"></script>
<style type="text/css"> body
{
padding-top: 50px;
padding-left: 100px; } #chartArea {
width: 400px;
height: 300px;
background-color: #CCC;
} .bar
{
display: inline-block;
width: 20px;
height: 75px; /* Gets overriden by D3-assigned height below */
margin-right: 2px;
fill: teal; /* SVG doesn't have background prop, use fill instead*/
z-index:99;
} </style>
</head>
<body>
<section id="chartArea"></section>
<script>
var dataset = _.map(_.range(15), function(num) {
return Math.random() * 50;
}), //reandom generate 15 data from 1 to 50
w = 400, h = 300;
var svg = d3.select('#chartArea').append('svg')
.attr('width', w)
.attr('height', h); //svg deosn't need 'px' var yScale = d3.scale.linear()
.domain([0, d3.max(dataset) * 1.1]) //d3.max(dataset), set the max val of database
.range([0, h]); svg.selectAll('div')
.data(dataset)
.enter()
.append('rect')// svg doesn't have div, use rect instead
.attr('class', "bar")
.attr('width', 20)
.attr('x', function(each_data, index){
return index*22;
})
.attr('y', function(each_data){
return h-yScale(each_data);
})
.attr('height', function(each_data, i){
return yScale(each_data);
});
</script> <!--
1. svg should use 'fill' prop instead 'background-color'
2. svg width & height no need 'px'
3. attr(function(data_val, index){})
4. create svg, d3.select('selector').append('svg').attr('width', xxx).attr('height', xx)
5. svg should use 'rect' instead of 'div'
-->
</body>
</html>
[D3] 4. d3.max的更多相关文章
- 【D3】D3学习轨迹-----学习到一定层度了再更新
1. 首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2. 了解d3的专有名词 http://www.cnblogs.com/huxiaoyun90/p ...
- d3.js d3.transform 方法移除的解决方案
rt d3.transform在新版本中移除 需要自行写出该功能 function getTranslation(transform) { // Create a dummy g for calcul ...
- [D3] Debug D3 v4 with Dev Tools
Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visual ...
- [D3] Make D3 v4 Charts Responsive with the viewBox attribute
Making SVGs responsive is unfortunately not as simple as adding some media queries. This lesson intr ...
- 【D3】D3词汇表
按字母顺序 axis:数轴或坐标轴表示两个维度上数据尺度的直线 bar chart:条形图 (参见Excel)以矩形宽度反映数值大小的图表形式 bar:条形以宽度反映数值大小的矩形(rect) bin ...
- D3.js 入门学习(一)
一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 ...
- D3、EChart、HighChart绘图demol
1.echarts: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- D3.js 入门学习(二) V4的改动
//d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不 ...
- vuejs plus d3
vuejs 是一个数据驱动视图的前端框架,一切皆可以作为可重用的组件加以使用. d3则是数据可视化javascript库,如何将二者的长处相结合是一个挑战. https://tyronetudehop ...
随机推荐
- bzoj 3720: Gty的妹子树 块状树
3720: Gty的妹子树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 412 Solved: 153[Submit][Status] Descr ...
- hdu 4752
计算几何+数值计算的题目: 要用到辛普森积分,没有学过~~~ 参考学习了acm_Naruto大神 的代码! 代码: #include<cstdio> #include<cmath&g ...
- hdu 4749
题目很简单,不过题意很难看懂. 就是给一个标准的大小关系的队列,从原队列中找出最多的匹配子队列,感觉就像一个KMP算法+贪心: 不过这个题可能数据有点水把,竟然只要判断相邻的关系就可以A掉: 代码: ...
- 【Earthquake, 2001 Open 】 0-1 分数规划
71 奶牛施工队一场地震把约翰家园摧毁了,坚强的约翰决心重建家园.约翰已经修复了 N 个牧场,他需要再修复一些道路把它们连接起来.碰巧的是,奶牛们最近也成立了一个工程队,专门从事道路修复.而然,奶牛 ...
- 在VS2008中配置WDK7600驱动开发环境
网上这类资料多如牛毛,也许很多人都是转来转去,却很有人去真正的测试,有时候感觉确实对他人也是一种误导. 这里是我自己在VS2008 + WDK7600.16385.0 + DDKWizard配置自己的 ...
- 故障模块名称: NetdiskExt64.dll的解决之法
故障模块名称: NetdiskExt64.dll的解决之法 2013年8月5日 开机,资源管理器报错.详细报错信息如下: 问题签名: 问题事件名称: APPCRASH 应用程序名: ...
- laravel 框架学习资料
demo:http://forumsarchive.laravel.io/viewtopic.php?id=3536 使用Laravel和Angular创建一个单页的评论应用 http://devel ...
- reviewboard搭建
reviewboard的搭建 系统:fedora 19 内核版本:3.9.5-301.fc19.x86_64 步骤 命令 备注 安装mysql # yum -y install mysql mysql ...
- Exporter - 实现默认的导入方法用于模块
Exporter - 实现默认的导入方法用于模块 简介: In module YourModule.pm: package YourModule; require Exporter; @ISA = q ...
- Red Hat linux 如何增加swap空间
按步骤介绍 Red Hat linux 如何增加swap空间 方法/步骤 第一步:确保系统中有足够的空间来用做swap交换空间,我使用的是KVM,准备在一个独立的文件系统中添加一个swap交换文件,在 ...