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. JS实现精确加减乘除

    说明:项目中要使用 JS 实现自动计算的功能,进行一些浮点数运算时,计算结果却是一长串的值,这里提供一个解决方法,问题基本上可以解决. 具体代码如下: //加法函数 function accAdd(a ...

  2. JNI/NDK开发指南（二）——JVM查找java native方法的规则

    通过第一篇文章,大家明白了调用native方法之前,首先要调用System.loadLibrary接口加载一个实现了native方法的动态库才能正常访问,否则就会抛出java.lang.Unsatis ...

  3. python 处理cookie简单很多啊 httpclient版本是4.3.3

    模拟登录流程: 1 请求host_url 2 从host_url中解析出 隐藏表单 的值 添加到POST_DATA中 3 添加账户,密码到POST_DATA中 4 编码后,发送POST请求    要点 ...

  4. VS2010皮肤控件介绍

    在我们平时使用的各种工具中,如QQ,迅雷,以及各种空间等,都提供了一些换肤功能,可以让我们选择各种我们喜欢的界面.本文就对VS中常用的窗口程序做一个简单的换肤,利用一个dll文件来进行实现. 首先我们 ...

  5. 不同框架实现的WebService的服务端获取HttpServletRequest的方法

    一. 基于xfire实现的WebService HttpServletRequest request = XFireServletController.getRequest(); 二. 基于axis实 ...

  6. jquery 提示插件 cluetip

    jquery的 插件cluetip, 地址下载是:plugins.learningjquery.com/cluetip/demo/ 下面简单讲解下用法: 1 首先当然要放JQUERY的基本JS,和这个 ...

  7. 论游戏中Buff的实现 [转]

    论游戏中Buff的实现 分类: C/C++ 游戏开发2012-09-13 14:30 574人阅读 评论(6) 收藏 举报 c++游戏开发 源地址:http://blog.codingnow.com/ ...

  8. The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

    The server is temporarily unable to service your request due to maintenance downtime or capacity pro ...

  9. 使用Eclipse构建GeoTools项目

    转自:http://hi.baidu.com/liushuigs/item/a62969e6667f9815585dd8b1 由于GeoTools是原本是使用Maven构建的,所以,不能直接将工程导入 ...

  10. HDU-2547 无剑无我

    无剑无我 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...