zoukankan      html  css  js  c++  java
  • D3——scale

    d3.scale 比例尺

    “Scales are functions that map from an input domain to an output range”

    Domains 定义域 和 Ranges 值域

    创建线性比例尺

    var scale = d3.scale.linear()
                        .domain([100, 500])
                        .range([10, 350]);
    scale(100);  //Returns 10
    scale(300);  //Returns 180
    scale(500);  //Returns 350
    scale(200);    //Returns 95
    scale(450.5);   //Returns 307.925
    scale(-100);    //Returns -160

    d3.max()和d3.min()

    var dataset = [
                    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
                  ];
    d3.max(dataset);  // Returns [85, 21].  What???
    d3.max(dataset, function(d) {
        return d[0];   //Returns 480 ; References first value in each subarray
    });
    
    .attr("cx", function(d) {
        return d[0];
    })
    .attr("cy", function(d) {
        return d[1];
    })

    设置动态比例尺

    //width and height
    var w=500;
    var h= 100;
    //
    x轴比例尺 var xScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[0]; })]) .range([0, w]); //y轴比例尺 var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[1]; })]) .range([0, h]);

    设置圆心和label,根据比例尺缩放值

    //改变散点图中设置circle和label的方法
    //设置圆的中心点
    .attr("cx", function(d) {
        return xScale(d[0]);  //Returns scaled value
    })
    .attr("cy", function(d) {
        return yScale(d[1]);
    })
    
    //设置text label的位置
    .attr("x", function(d) {
        return xScale(d[0]);
    })
    .attr("y", function(d) {
        return yScale(d[1]);
    })

    Refining the Plot

    .range([h, 0]);

    有些元素无法完全显示,被切断了,设置一个padding

    var padding = 20;
    
    //xScale由range([0,w]),改为如下
    .range([padding, w - padding]);
    
    //yScale由range([h, 0]),改为如下
    .range([h - padding, padding]);

    //double padding
    .range([padding, w - padding * 2]);

    其他方法:

    d3.scale.linear().nice() - 扩展比例尺的定义域为一个优化的定义域

    d3.scale.linear().rangeRound() - 设置比例尺的输出范围,并四舍五入

    d3.scale.linear().clamp() - 启用或者关闭值域的闭合。

    其他比例尺:

    identity - 线性恒等比例尺

    sqrt - 平方根比例尺

    pow - 指数比例尺

    log - 对数比例尺

    quantize - 量化比例尺(值域离散)

    quantile - 分位数比例尺

    ordinal - 序数比例尺

    threshold - 临界值比例尺(值域离散)

    d3.scale.category10() - 构造一个10种颜色的序数比例尺。

    d3.scale.category20() - 构造一个20种颜色的序数比例尺。

    d3.scale.category20b() - 构造一个20种颜色的序数比例尺。

    d3.scale.category20c() - 构造一个10种颜色的序数比例尺。

    d3.time.scale()

  • 相关阅读:
    查找(线性索引)
    查找(顺序表&有序表)
    数据结构图之六(关键路径)
    数据结构图之五(拓扑排序)
    数据结构图之四(最短路径--弗洛伊德算法)
    数据结构图之三(最短路径--迪杰斯特拉算法)
    数据结构图之二(最小生成树--克鲁斯卡尔算法)
    数据结构图之二(最小生成树--普里姆算法)
    数据结构图之一(基本概念,存储结构,两种遍历)
    数据结构--堆
  • 原文地址:https://www.cnblogs.com/xuepei/p/7527814.html
Copyright © 2011-2022 走看看