D3.js --- 第二章 比例尺与坐标轴

4种常用的比例尺: 线性、序数、序数段、时间比例尺

d3.scaleLinear() //线性比例尺 如 [0,10] <-----> [0,100]
d3.scaleOrdinal() //序数比例尺 如[0,1,2,3,4,5] <----->['apple','orange','banana','lemon','peach']
d3.scaleBand() //序数段比例尺 如[0,1,2,3,4] <-----> [0,100]
d3.scaleTime() //时间比例尺 如['1521684183', '1524362583', '1526954583', '1529136021'] <-----> [0,100]

坐标轴

d3.axisBottom\Left\Right\Top(scale)

使用方法

//定义画布
let width = 300
let height = 300
let margin = {top:30,right:30,bottom:30,left:30}
let svg = d3.select('svg')
                 .attr('width',width)
                 .attr('height',height)

// 1.定义线性比例尺
let dataset = [1,2,3,4,5]
let min = d3.min(dataset )
let max= d3.max(dataset )
let Linear = d3.scaleLinear()
               .domain([min,max])  //定义域
               .range([0,height - margin.top - margin.bottom])   //值域

// 使用线性比例尺
let yAxis = d3.axisLeft(Linear)
let g = svg.append('g')
           .attr("transform","translate(" + marign.left  + "," + margin.top + ")")
           .call(yAxis)



// 1.1.1 定义序数比例尺
 let index = [0, 1, 2, 3, 4]
 let fruit= ['apple', 'orange', 'banana', 'peach', 'lemon']
 let ordinalScale = d3.scaleOrdinal()
                      .domain(index )
                      .range(fruit)

//1.1.2 定义序数段比例尺
let index = [0,1,2,3,4]
let scaleBand = d3.scaleBand()
                   .domain(index)
                   .range([0, width- marge.left - marge.right])

//1.1.3 定义时间比例尺
let dataset= ['1557128933', '1547857928', '1550536328', '1552955528']
let extent = d3.extent(dataset, (d, i) => { return new Date(d * 1000)})
let scaleTime = d3.scaleTime()
                  .domain(extent)
                  .range([0, width - margin.left - margin.right])
let xAxisTime = d3.axisBottom(scaleTime).tickFormat(d3.timeFormat("%Y-%m-%d %H:%M:%S"))