美文网首页
d3 v5成长之路2

d3 v5成长之路2

作者: this_smile | 来源:发表于2019-08-20 17:59 被阅读0次
  • 创建比例尺
d3.scaleLinear()
  • 创建X轴
 this.svg3.append("g")
         .attr("class", "axis")
         .attr("transform", "translate(0," + (this.h - 10) + ")")//设置据下边界的距离
         .call(d3.axisBottom(xScale))
  • 创建Y轴
 this.svg3.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(" + 10 + ",0)")//设置轴据左边界的距离
          .call(d3.axisLeft(yScale)) 

append():在选择集尾部插入元素
insert():在选择集前面插入元素
删除元素很简单,对于选择的元素,使用remove();即可

var p = d3.select("body")
            .select("#myP3")
            .remove();
d3 scale详解

domain是定义域,就是坐标系下的值
range是值域,就是映射到svg画布上的值

1.d3.scaleLinear() 线性比例尺

domain:连续型
range:连续型

scale_l = d3.scaleLinear().domain([1,10]).range([0,100])

线性比例尺超出定义域的部分会按映射拓展

2.d3.scaleBand() 序数比例尺

domain: 离散型
range:连续型
可以理解为用domain将range平均分割

scale_b= d3.scaleBand().domain([1,2,3,4]).range([0,100])

3.d3.scaleOrdinal() 序数比例尺

domain: 离散型
range:离散型
可以简单理解为map映射

scale_o = d3.scaleOrdinal().domain(['a', 'b', 'c']).range([10, 20, 30])

4.d3.scaleQuantize() 量化比例尺

domain: 连续型
range:离散型
scaleBand的逆变换

scale_q = d3.scaleQuantize().domain([0, 10]).range(['s', 'm', 'l'])

5.d3.scaleTime() 时间比例尺

domain:连续型,是时间
range:连续,是刻度

let scale = d3.scaleTime()
.domain([new Date(2018, 0, 1, 0), new Date(2018, 0, 1, 2)])
.range([0,100])

6.颜色比例尺

d3.schemeCategory10
d3.schemeCategory20
d3.schemeCategory20b
d3.schemeCategory20c

// 定义一个序数颜色比例尺

let color = d3.scaleOrdinal(d3.schemeCategory10)

7.其他比例尺

d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 类似scaleSqrt的乘方比例尺
d3.scaleLog() // 对数比例尺
d3.scaleQuantile() // 分位数比例尺

点击事件:

  • click:鼠标单击某元素时触发,相当于mousedown和mouseup的组合
  • mouseover:鼠标放在某元素上触发
  • mouseout:鼠标移出某元素时触发
  • mousemove:鼠标移动时触发
  • mousedown:鼠标按钮被按下时触发
  • mouseup:鼠标按钮被松开时触发
  • dblclick:鼠标双击时触发
 .on("mouseout", function() {
            d3.select(this) 
             .transition()
              .delay(1500)
              .duration(1500)

相关文章

  • Explore D3

    d3 v5 Tech Stack ? Node Webpack D3 Installation ? Compile...

  • d3 v5成长之路2

    创建比例尺 创建X轴 创建Y轴 append():在选择集尾部插入元素insert():在选择集前面插入元素删除元...

  • 会计学小白成长之路——顺序集

    会计学小白成长之路1 会计学小白成长之路2 会计学小白成长之路3 会计学小白成长之路4 会计学小白成长之路5 会计...

  • D3 v5 学习笔记-2 SVG

    D3也可以使用Canvas绘图,不过对于SVG的支持更多。所以先从SVG开始。 1.SVG SVG教程-MDN 1...

  • Day1 求100以内整除7的和

    方法1: 方法2: 小白成长之路~~~~

  • 2019-03-30计算机二级

    '=VLOOKUP(D3,编号对照!$A$2:$C$19,2,FALSE) '=VLOOKUP(D3,编号对照!$...

  • 尖刀讲师训练营 Day4

    主题:《专家级导师成长之路》 (1)课程主题:《专家级导师成长之路》 (2)课程时间:今晚20:00~20:30 ...

  • 成长之路(2)

    今天是明净去训练的第一天,他穿上了新队服心里好不激动,他想:我一定可以改变自己的命运。 他第一个来到体育场...

  • 成长之路-2

    本周临摹了国外的一款app,电商类的,名字叫什么不知道,售卖beast耳机以及游戏手柄 这款app非常的简洁,风格...

  • 成长之路2

    回想起两年前有一种想要写文字的想法,或者说是众多想法中的一个,其他还有健身,读书,学英语等,说真的这是除了工作以外...

网友评论

      本文标题:d3 v5成长之路2

      本文链接:https://www.haomeiwen.com/subject/tzjpsctx.html