日期刻度与线图点不对齐

Question

到目前为止，我有一个这样的图表。 line chart

问题： 1.日期刻度稍微偏向右边2.不从原点开始。

目标： 我想绘制与圈子对齐的刻度

堆叠： typescript，angular2，d3 v4

我不确定xScale或xAxis是否已关闭。

这里，我有两个阵列。

```data1 = [
  {date: new Date('2017-04-23'), value: 8000},
  {date: new Date('2017-04-24'), value: 6000},
  {date: new Date('2017-04-25'), value: 14000},
  {date: new Date('2017-04-26'), value: 12000},
  {date: new Date('2017-04-27'), value: 18000},
  {date: new Date('2017-04-28'), value: 14300},
  {date: new Date('2017-04-29'), value: 17000}
];
data2 = [
  {date: new Date('2017-04-23'), value: 7500},
  {date: new Date('2017-04-24'), value: 5300},
  {date: new Date('2017-04-25'), value: 13000},
  {date: new Date('2017-04-26'), value: 10000}
];```

这是我的代码：

export class DashboardProgressGraphComponent implements OnInit {
  @ViewChild('chart') private chartContainer: ElementRef;
  @Input() private data1: Array<any>;
  @Input() private data2: Array<any>;
  private margin: any = { top: 20, bottom: 30, left: 50, right: 20};
  private chart: any;
  private width: number;
  private height: number;
  private xScale: any;
  private yScale: any;
  private colors: any;
  private xAxis: any;
  private yAxis: any;
  private line1: d3Shape.Line<[number, number]>;
  private line2: d3Shape.Line<[number, number]>;
  private svg: any;
  
  ngOnInit() {
    this.createChart();
  }
  
  createChart() {
    const element = this.chartContainer.nativeElement;
    this.width = element.offsetWidth - this.margin.left - this.margin.right;
    this.height = element.offsetHeight - this.margin.top - this.margin.bottom;
    this.svg = d3.select(element).append('svg')
      .attr('width', element.offsetWidth)
      .attr('height', element.offsetHeight);

    // chart plot area
    this.chart = this.svg.append('g')
      .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);

    // set the ranges
    this.xScale = d3.scaleTime().range([0, this.width]).domain(d3.extent(this.data1, d => d.date));
    this.yScale = d3.scaleLinear().range([this.height, 0]).domain([0, d3.max(this.data1, d => d.value )]);

    // define the line
    this.line1 = d3.line()
      .x( (d: any) => this.xScale(d.date) )
      .y( (d: any) => this.yScale(d.value) );
    this.line2 = d3.line()
      .x( (d: any) => this.xScale(d.date) )
      .y( (d: any) => this.yScale(d.value) );

    // draw x & y axis
    this.xAxis = this.svg.append('g')
      .attr('class', 'axis x-axis')
      .attr('transform', `translate(${this.margin.left}, ${this.margin.top + this.height})`)
      .call(d3.axisBottom(this.xScale).ticks(d3.timeDay.every(1)));
    this.yAxis = this.svg.append('g')
      .attr('class', 'axis y-axis')
      .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
      .call(d3.axisLeft(this.yScale));
      
    // draw line1
    this.chart.append('path')
      .datum(this.data1)
      .attr('class', 'line1')
      .attr('d', this.line1);

    // draw line2
    this.chart.append('path')
      .datum(this.data2)
      .attr('class', 'line2')
      .attr('d', this.line2);

    // draw dots on line1
    this.svg.selectAll('dot')
      .data(this.data1)
      .enter().append('circle')
      .attr('class', 'dot1')
      .attr('r', 5)
      .attr('cx', d => this.xScale(d.date) + 50)
      .attr('cy', d => this.yScale(d.value) + 20)
      .on('mouseover', d => this.tooltip.style('opacity', 1))
      .on('mouseout', d => this.tooltip.style('opacity', 0));

    // draw dots on line2
    this.svg.selectAll('dot')
      .data(this.data2)
      .enter().append('circle')
      .attr('class', 'dot2')
      .attr('r', 5)
      .attr('cx', d => this.xScale(d.date) + 50)
      .attr('cy', d => this.yScale(d.value) + 20)
      .on('mouseover', d => this.tooltip.style('opacity', 1))
      .on('mouseout', d => this.tooltip.style('opacity', 0));
  }
}

很抱歉与typescript和类函数混淆，但您只需要查看createChart（）函数中的代码。 在设置xScale或设置xAxis的地方出现问题。 这可以在注释行 //设置范围和 // draw x＆amp; y轴

修改 我将.nice（d3.timeDay）添加到xScale中，如@TheBiro建议的那样。 并添加了.tickSize（-this.height）来显示图表是如何离开的。

editted line chart

如您所见，线路和圆圈仍然不在刻度线上。 它没有解决问题..