d3.js實現自定義多y軸折線圖的示例代碼

svg.select('#id')
 .append('svg')
 .attr('width', width)
 .attr('height', height)

// x軸以時間為刻度
this.x = d3
 .scaleTime()
 .domain([this.beginTime, this.endTime])
 .range([0, this.width]);

// y軸按照像素值為刻度，所有數據需按照比例轉換計算
this.y = d3
 .scaleLinear()
 .domain([0, this.height])
 .range([this.height, 0]);

this.xAxis = d3
 .axisTop(this.x)
 // .ticks(d3.timeHour.every(4))
 .tickValues(d3.timeHour.range(this.beginTime, this.endTime, 4))
 .tickSize(this.height)
 .tickFormat(function (d, i) {
 // return d.getHours();
 return;
 });

this.yAxis = d3
 .axisLeft()
 .scale(this.y)
 .tickValues(d3.range(0, this.height, this.height / 40))
 .tickSize(-this.width)
 .tickFormat(function (d, i) {
 return;
 });

// 折線模板
this.line = d3
 .line()
 .x(function (d) {
 return that.x(d.datetime);
 })
 .y(function (d) {
 return that.y(d.svgValue);
 });