d3.js面积超过绘图的Y比例尺

Question

我当前正在构建一个有角度的应用程序，并且正在使用d3.js库。在一个图形中，除了一条有序线外，我还在绘制一个区域，但是当绘制该区域时，它似乎超出了y轴的限制，如您在下面的图像中所见。

private buildChart() {
    this.chartProps = {};

    // Set the dimensions of the canvas / graph
    var margin = {top: 20, right: 10, bottom: 30, left: 65},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

    // Set the ranges/scales
    this.chartProps.x = d3.scaleLinear().range([0, width]);
    this.chartProps.y = d3.scaleLinear().range([height, 0]);

    // Define the axes
    var xAxis = d3.axisBottom(this.chartProps.x).ticks(6).tickPadding(8);
    var yAxis = d3.axisLeft(this.chartProps.y).ticks(6).tickPadding(8);

    let _this = this;

    // Define the main line function
    var valueline = d3.line<any>()
    .x(function (d) {
      return _this.chartProps.x(d.x);
    })
    .y(function (d) { 
      return _this.chartProps.y(d.y); 
    });

    // Define the area for the confidence intervals function
    var confidenceArea = d3.area<any>()
    .x(function (d) {
      return _this.chartProps.x(d.x);
    })
    .y0( function(d){
      return _this.chartProps.y(d.yt);
    })
    .y1( function(d){
      return _this.chartProps.y(d.yb) ;
    })

    // Prepare the SVG
    var svg = d3.select(this.chartElement.nativeElement)
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

    // Scale the range of the data
    this.chartProps.x.domain(
      d3.extent(_this.plotData, function (d:any) {
        return d.x;
    }));
    this.chartProps.y.domain(
      d3.extent(_this.plotData, function (d:any) {
      return d.y;
    }));

    // Add the area path.
    svg.append('path')
      .attr('class', 'line confidence')
      .style('fill', '#cce5df')
      .style('stroke', 'none')
      .attr('d', confidenceArea(_this.plotData));

    // Add the valueline path.
    svg.append('path')
      .attr('class', 'line mainline')
      .style('stroke', 'steelblue')
      .style('fill', 'none')
      .attr('stroke-width', 1.5)
      .attr('d', valueline(_this.plotData));


    // Add the X Axis
    svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', `translate(0,${height})`)
      .call(xAxis);

    // Add the Y Axis
    svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis);

    // Add the Y Axis label
    svg.append('text')
      .attr('transform', 'rotate(-90)')
      .attr('y', 0 - margin.left)
      .attr('x', 0 - (height / 2))
      .attr('dy', '1em')
      .style('text-anchor', 'middle')
      .text('Area Under the ROC Curve');

    // Setting the required objects in chartProps so they could be used to update the chart
    this.chartProps.svg = svg;
    this.chartProps.valueline = valueline;
    this.chartProps.confidenceArea = confidenceArea;
    this.chartProps.xAxis = xAxis;
    this.chartProps.yAxis = yAxis;
  }

因此，我尝试使用边距值，并从缩放函数（请参见下面）中减去它们，但实际上并没有解决问题。

.y1( function(d){
      return _this.chartProps.y(d.yb) - margin.top;
 })

关于我为什么会出现这种行为的任何想法/提示都会非常受欢迎。