一. 比例尺
此处记录常用的四种常用比例尺：线性、序数、序数段、时间比例尺，其它稍后更新或者自行官网查看
d3.scaleLinear()
d3.scaleOrdinal()
d3.scaleBand()
d3.scaleTime()
二. 坐标轴
api: axisBottom\Left\Right\Top等
使用：d3.axisBottom(scale); scale比例尺
三. vue使用
<
template
lang=
'pug'
>
div
.scale-pane(
:id=
"id")
svg
</
template
>
<
script
>
/**
* 比例尺
*/
import
*
as
d3
from
'd3'
export
default {
name:
'Scale',
data() {
return {
id:
''
}
},
methods: {
uuid () {
function
s4 () {
return
Math.
floor((
1 +
Math.
random()) *
0x10000)
.
toString(
16)
.
substring(
1)
}
return (
s4() +
s4() +
'-' +
s4() +
'-' +
s4() +
'-' +
s4() +
'-' +
s4() +
s4() +
s4()
)
}
},
created() {
this.
id =
this.
uuid()
},
mounted () {
/******************1.线性比例尺**********************/
//如下：0-2.5 <-------> 0-300
let
dataset = [
2.5,
2.1,
1.7,
1.3,
0.9]
let
scaleLinear =
d3.
scaleLinear()
.
domain([
0,
d3.
max(
dataset)])
.
range([
0,
300])
/******************2.序数比例尺**********************/
//如下: ordinalScale(0) ---> 'red'; ordinalScale(2) ---> 'green'
let
index = [
0,
1,
2,
3,
4]
let
color = [
'red',
'blue',
'green',
'yellow',
'black']
let
ordinalScale =
d3.
scaleOrdinal()
.
domain(
index)
.
range(
color)
/******************3.序数段比例尺**********************/
//如下：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] <-------> [0, 480]; scaleBand.step()每一份是48; scaleBand(i)下标开始理解为坐标起点scaleBand(0)-->0,scaleBand(1)-->48
let
bandWidth =
600
let
marge = {
top:
60,
bottom:
60,
left:
60,
right:
60 }
let
datasetBand = [
10,
20,
30,
23,
13,
40,
27,
35,
20,
33]
let
ranges =
d3.
range(
datasetBand.
length)
let
scaleBand =
d3.
scaleBand()
.
domain(
ranges)
//此次domain接收一个数组
.
range([
0,
bandWidth -
marge.
left -
marge.
right])
/******************4.时间比例尺(属于线性，经常用单独拿出来)**********************/
//如下：tickFormat格式化时间轴显示格式
let
timeList = [
'1521684183',
'1524362583',
'1526954583',
'1529136021']
let
extent =
d3.
extent(
timeList, (
d,
i)
=> {
return
new
Date(
d *
1000)
})
let
scaleTime =
d3.
scaleTime()
.
domain(
extent)
.
range([
0,
300])
let
xAxisTime =
d3.
axisBottom(
scaleTime).
tickFormat(
d3.
timeFormat(
"%Y-%m-%d %H:%M:%S")).
ticks(
3)
/******************使用比例尺************************/
this.
width =
document.
getElementById(
this.
id).
clientWidth
this.
height =
document.
getElementById(
this.
id).
clientHeight
const
svg =
d3.
select(
this.
$el).
select(
'svg')
.
attr(
'width',
this.
width)
.
attr(
'height',
this.
height)
let
g =
svg.
append(
'g').
attr(
'transform',
'translate(' +
marge.
top +
',' +
marge.
left +
')')
let
rectHeight =
30
g.
selectAll(
'rect')
.
data(
dataset)
.
enter()
.
append(
'rect')
.
attr(
'x',
20)
.
attr(
'y',
function(
d,
i) {
return
i *
rectHeight
})
.
attr(
'width',
function(
d) {
return
scaleLinear(
d)
//设置宽,并在这里使用比例尺
})
.
attr(
'height',
rectHeight -
5)
.
attr(
'fill',
'blue')
/***************** 使用坐标轴******************/
let
xAxis =
d3.
axisBottom(
scaleLinear).
ticks(
7)
// g.append('g')
// .attr("transform", "translate("+20+"," + (dataset.length*rectHeight) + ")")
// .call(xAxis)
g.
append(
'g')
.
attr(
"transform",
"translate("+
20+
"," + (
dataset.
length*
rectHeight) +
")")
.
call(
xAxisTime)
.
selectAll(
'text')
.
attr(
'transform',
'rotate(30)')
.
style(
'text-anchor',
'start')
//代码说明call === xAixs (g.append("g") ) ;
}
}
</
script
>
<
style
lang=
'scss'
scoped
>
.scale-pane {
width:
100%;
height:
1000px;
}
</
style
>