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的更多相关文章

  1. 【D3】D3学习轨迹-----学习到一定层度了再更新

    1.  首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2.  了解d3的专有名词  http://www.cnblogs.com/huxiaoyun90/p ...

  2. d3.js d3.transform 方法移除的解决方案

    rt d3.transform在新版本中移除 需要自行写出该功能 function getTranslation(transform) { // Create a dummy g for calcul ...

  3. [D3] Debug D3 v4 with Dev Tools

    Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visual ...

  4. [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 ...

  5. 【D3】D3词汇表

    按字母顺序 axis:数轴或坐标轴表示两个维度上数据尺度的直线 bar chart:条形图 (参见Excel)以矩形宽度反映数值大小的图表形式 bar:条形以宽度反映数值大小的矩形(rect) bin ...

  6. D3.js 入门学习(一)

    一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 ...

  7. D3、EChart、HighChart绘图demol

    1.echarts:   <!DOCTYPE html>   <html>   <head>   <meta charset="utf-8" ...

  8. D3.js 入门学习(二) V4的改动

    //d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不 ...

  9. vuejs plus d3

    vuejs 是一个数据驱动视图的前端框架,一切皆可以作为可重用的组件加以使用. d3则是数据可视化javascript库,如何将二者的长处相结合是一个挑战. https://tyronetudehop ...

随机推荐

  1. 双系统格式化硬盘后装XP遇到grub rescue的问题

    好奇于深度的Deepin系统,给老电脑装了xp和deepin双系统.无奈07年的机子带Deepin,实在是太卡了.正好想给硬盘重新分区,直接将硬盘格式化,重装了xp.于是,问题来了,开机显示: GRU ...

  2. No Hibernate Session bound to thread, and configuration does not allow creat

    No Hibernate Session bound to thread, and configuration does not allow creat 今天遇到这么一个错误,在网上差了很多都没有能解 ...

  3. Sprint5

    进展:今天开始进行了登录界面的编写及实现. 燃尽图: 工作照:

  4. requirejs学习博客址分享

    1. http://blog.jobbole.com/30046/ 2. http://www.requirejs.cn/ 3. http://www.ruanyifeng.com/blog/2012 ...

  5. 在C#里实现各种窗口切换特效，多达13种特效

    原文:http://www.cnblogs.com/clayui/archive/2011/06/28/2092126.html 预览:   下载 这次clayui给大家带来了比较实用的东西,因为时间 ...

  6. BZOJ1345: [Baltic2007]序列问题Sequence

    1345: [Baltic2007]序列问题Sequence Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 556  Solved: 274[Submi ...

  7. ☀【jQuery插件】DOM 延迟渲染

    test.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  8. 非常有用的Java程序片段

    1.向文件末尾添加内容 BufferedWriter out = null; try { out = new BufferedWriter(new FileWriter(”filename”, tru ...

  9. [C# 网络编程系列]专题九：实现类似QQ的即时通信程序

    转自:http://www.cnblogs.com/zhili/archive/2012/09/23/2666987.html 引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例 ...

  10. android自动化(2)

    使用monkeyrunner 自动化删除程序的时候出现如下错误 在任务管理器卸载android adb,Ok..然后再次使用的时候就出现这个问题, Try below steps: Close the ...