d3 v5成长之路2

创建比例尺

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)

最后编辑于：2019.08.21 10:14:38