D3临摹作业(西安交大国家艺术基金数据可视化培训第19天)

最新推荐文章于 2023-02-25 16:43:19 发布

fox541

最新推荐文章于 2023-02-25 16:43:19 发布

阅读量183

点赞数

分类专栏： ASM 文章标签： D3

本文链接：https://blog.csdn.net/fox541/article/details/92802119

版权

ASM 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

第五章 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)

参考文献：

Introducing d3-scale by Mike Bostock
Chapter 7. Scales of Interactive Data Visualization for the Web by Scott Murray
d3: scales, and color. by Jérôme Cukier

fox541

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
D3临摹作业(西安交大国家艺术基金数据可视化培训第19天)

第五章 D3比例尺第一节 D3比例尺函数定义域domain() 值域range() 其他连续定义域线性比例尺 d3.scalelinear() 默认是[0,1] 默认是[0,1] 对数比例尺 d3.scalelog() y=m*log(x)+b 默认是[0,1]...
复制链接

扫一扫