d3.js - 使用 d3.js 版本 4 或版本 5 限制折线图中 X 轴上的平移

Question

我想使用 d3.js 版本 5 限制折线图中 X 轴上的平移。但我不知道该怎么做。在 X 轴上，我使用 scalePoint() 以日期格式显示数据，在 y 轴上 scaleLinear() 用于显示数字。你能帮我解决这个问题吗？这是我的代码

  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.scalePoint()
  .domain(this.dataset[0].fluencyData.map((data) => {
    return new Date(data.date);
  }))
  .range([0, this.width]);
this.xScaleCopy = this.xScale.copy();


// Y AXIS
this.yScale = d3.scaleLinear()
  .domain([0, 110])
  .range([this.height, 0]);

this.xAxis = d3.axisBottom().scale(this.xScale).tickSizeOuter(0).tickFormat(d3.timeFormat('%b %d'));
this.yAxis = d3.axisLeft().scale(this.yScale).tickSize(-this.width);

// Line Generator
this.line = d3.line()
  .x((data) => this.xScale(new Date(data.date)))
  .y((data) => this.yScale(data.wcpm));
// .curve(d3.curveMonotoneX);

// Add SVG to Div
this.svg = d3.select('#displayChart').append('svg')
  // .attr('preserveAspectRatio', 'xMinYMin meet')
  // .attr(
  //   'viewBox',
  //   '0 0 ' +
  //   (this.width + this.margin.left + this.margin.right) +
  //   ' ' +
  //   (this.height + this.margin.top + this.margin.bottom))
  .attr('width', this.width + this.margin.left + this.margin.right)
  .attr('height', this.height + this.margin.top + this.margin.bottom)
  .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

// Define the div for the tooltip
this.toolTipDiv = d3.select('#displayChart').append('div')
  .attr('class', 'tooltip')
  .style('opacity', 0);

// Append XAXIS to the SVG
const groupX = this.svg.append('g')
  .attr('class', 'xAxis')
  .attr('transform', 'translate(0,' + this.height + ')')
  .call(this.xAxis);

// Append YAXIS to SVG
const groupY = this.svg.append('g')
  .attr('class', 'yAxis')
  .attr('transform', 'translate(20,0)')
  .call(this.yAxis);

// Make a Path for Dataset
this.svg.append('path')
  .datum(this.dataset[0].fluencyData)
  .attr('class', 'line')
  .attr('d', this.line);
// .attr('transform', 'translate(50,0)');

// Text Heading of DATE in chart
// this.svg.append('text')
//   .attr('transform', 'translate(' + (-20) + ',' + (this.height + 13) + ')')
//   .attr('dy', '.35em')
//   .attr('class', ' xAxis')
//   .text('Date');

// Append Circles in chart with different Colors
this.appendCircles();
const zoom = d3.zoom()
  .scaleExtent([1, 1])  // This control how much you can unzoom (x0.5) and zoom (x20)
  .on('zoom', () => {
    console.log(d3.event);
    this.xAxis.scale(this.xScale);
    groupX.call(this.xAxis);

    this.xScale.range(this.xScaleCopy.range().map((d) => {
      return d3.event.transform.applyX(d);
    }));

    // Make a Path for Dataset
    this.svg.select('.line').remove();
    this.svg.selectAll('circle').remove();
    this.svg.append('path')
      .datum(this.dataset[0].fluencyData)
      .attr('class', 'line')
      .attr('d', this.line);
     }
     }

在缩放中做什么以限制平移 x 轴？输出图像链接：https ://ibb.co/NVDJCky

在 Y 轴上，您可以看到当我们在 X 轴上应用平移时，x 轴是重叠的。

标签： d3.jscharts