小编JAY*_*ARA的帖子

将缩放行为从v3更新到v5

我面临的问题是由于版本不匹配,我无法在代码中编写以下函数。代码是

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)

charts zoom d3.js

3
推荐指数
1
解决办法
1488
查看次数

标签 统计

charts ×1

d3.js ×1

zoom ×1