zoukankan      html  css  js  c++  java
  • d3基础语法学习

    d3的2种比例尺 linear() 和ordinal() ;//前者线性比例尺按数字,后者序数比例尺按顺序对应

    var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
    
    var linear = d3.scale.linear()
            .domain([0, d3.max(dataset)])
            .range([0, 250]);
    var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
    
    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x",20)
        .attr("y",function(d,i){
             return i * rectHeight;
        })
        .attr("width",function(d){
             return linear(d);   //在这里用比例尺
        })
        .attr("height",rectHeight-2)
        .attr("fill","steelblue");

    坐标轴
    var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; //定义比例尺 var linear = d3.scale.linear() .domain([0, d3.max(dataset)]) .range([0, 250]); var axis = d3.svg.axis() .scale(linear) //指定比例尺 .orient("bottom") //指定刻度的方向 .ticks(7); //指定刻度的数量
    • d3.svg.axis():D3 中坐标轴的组件,能够在 SVG 中生成组成坐标轴的元素。
    • scale():指定比例尺。
    • orient():指定刻度的朝向,bottom 表示在坐标轴的下方显示。
    • ticks():指定刻度的数量。
     
  • 相关阅读:
    自定义ProgressBar
    Anroid开发中常用快捷键
    Intent用法
    IO(Input Output)流
    自定义Dialog
    仿UC点击两次返回键退出程序
    横竖屏切换时Activity的生命周期
    单例模式
    Timer用法
    关于数组
  • 原文地址:https://www.cnblogs.com/xiaoyaoweb/p/14313534.html
Copyright © 2011-2022 走看看