欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

《数据可视化原理与实例》临摹作业(西安交大国家艺术基金数据可视化培训第19天)

程序员文章站 2024-02-13 17:18:34
...

第五章 D3比例尺
 

第一节 D3比例尺

      函数 定义域domain() 值域range() 其他
连续定义域 线性比例尺 d3.scalelinear()   默认是[0,1] 默认是[0,1]  
对数比例尺 d3.scalelog() y=m*log(x)+b 默认是[0,1] 默认是[1,10] 可以用base[base]指定底数，默认是10
指数比例尺 d3.scalepow() y=m*x^k+b 默认是[0,1] 默认是[0,1] 可以用exponent(k)指定指数，默认是1
  时间比例尺 d3.scaleTime()   输入域变成了一个时间轴。    
  矢量比例尺 d3.scaleQuantize()   连续的 离散的  
离散定义域 序数比例尺 d3.scaleOrdinal()   可选 可选 定义域到值域逐个映射
  颜色比例尺 d3.schemeCategory10
d3.schemeCategory20
d3.schemeCategory20b
d3.schemeCategory20c		        

案例：对数比例尺

<html>  
  <head>   
        <title>对数比例尺</title>  
  </head> 
  <body>
    <script src="../D3/d3.v4.min.js" charset="utf-8"></script> 
        <h1>运行结果请在Chrome看Console</h1>
    <script>  
        var x = d3.scaleLinear()
                  .domain([1, 10000])
                  .range([0, 4]);
        console.log(x(10));
        console.log(x(100));
        console.log(x(130));
    </script> 
   </body>
</html>

或者（代码来源：github_D3）

/*位置编码*/
var x = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);

x(20); // 80
x(50); // 320

/*色彩编码*/
var color = d3.scaleLinear()
    .domain([10, 100])
    .range(["brown", "steelblue"]);

color(20); // "#9a3439"
color(50); // "#7b5167"

/*或缩写成：*/
var x = d3.scaleLinear([10, 130], [0, 960]);
var color = d3.scaleLinear([10, 100], ["brown", "steelblue"]);


/*量化比例尺：*/
let scale = d3.scaleQuantize().domain([0, 10]).range(['small', 'medium', 'long'])
/*输入与输出*/
scale(1) // 输出:small
scale(5.5) // 输出:medium
scale(8) // 输出:long  

/*domain()域外的情况：*/
scale(-10) // 输出：small
scale(10) // 输出：long

/*时间比例尺：*/
let scale = d3.scaleTime()
              .domain([new Date(2017, 0, 1, 0), new Date(2017, 0, 1, 2)])
              .range([0,100])

/*输入与输出：*/
scale(new Date(2017, 0, 1, 0)) // 输出:0
scale(new Date(2017, 0, 1, 1)) // 输出:50


/*序数比例尺：*/
let scale = d3.scaleOrdinal().domain(['jack', 'rose', 'john']).range([10, 20, 30])

/*输入与输出：*/
scale('jack') // 输出:10
scale('rose') // 输出:20
scale('john') // 输出:30

/*当输入不是domain()中的数据集时：*/
scale('tom') // 输出:10
scale('trump') // 输出:20

第二节 比例尺API

    D3输出范围是可视化坐标空间，它可以是任意类型，例如：颜色、字符串或者其他任意对象。
    可以使用多个值来创建一个分段的比例尺，即分段线性、分段指数和分段对数比例尺。
案例：分段线性色彩比例尺
 


<html>  
  <head>   
        <title>分段比例尺</title>  
  </head> 
  <body>
    <script src="../D3/d3.v4.min.js" charset="utf-8"></script> 
        <h1>运行结果请在Chrome看Console</h1>

        <script>  
          var color= d3.scaleLinear()
                       .domain([-1, 0, 1])
                       .range(["red", "white", "green"]);
          console.log(color(-1));
          console.log(color(0));
          console.log(color(1));
          console.log(color(-0.5));
          console.log(color(0.5));
        </script> 

   </body>
</html>

第三节 D3配色

案例：序数比例尺

/*定义一个序数颜色比例尺*/
let color = d3.scaleOrdinal(d3.schemeCategory10)


参考文献：

上一篇： 《数据可视化原理与实例》临摹作业(西安交大国家艺术基金数据可视化培训第15天)

下一篇： PPP实验配置

推荐阅读