我面临的问题是由于版本不匹配,我无法在代码中编写以下函数。代码是
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 10])
.on("zoom", zoomed);
Run Code Online (Sandbox Code Playgroud)
我已经尝试过这种方式
const zoom = d3.zoom()
.scaleExtent([1, 4])
.x(this.xScale)
.on('zoom', () => {})
Run Code Online (Sandbox Code Playgroud)
但这对我不起作用。
如何在d3版本5中编写相同的函数?我想使用d3版本5使折线图在y轴为固定位置的x轴上可滚动
这是我的实现基本代码
private createLineChart() {
this.width = 2000 - this.margin.left - this.margin.right;
this.height = 600 - this.margin.top - this.margin.bottom;
// X AXIS
this.xScale = d3.scaleBand()
.domain(this.dataset[0].fluencyData.map((data) => {
return new Date(data.date);
}))
.range([0, this.width]);
// Y AXIS
this.yScale = d3.scaleLinear()
.domain([0, 110])
.range([this.height, 0]);
// Line Generator
this.line = d3.line()
.x((data) => this.xScale(new Date(data.date)))
.y((data) => …Run Code Online (Sandbox Code Playgroud)