要在Angular NVD3折线图中实现缩放和拖动，在图表区域之外可见，可以使用以下代码示例：

1. 首先，确保已经安装了必需的依赖项。在项目根目录中运行以下命令：

npm install d3@5.16.0 nvd3@1.8.6 angular-nvd3@1.0.9 --save

2. 在Angular组件中引入必要的模块和样式：

import 'd3';
import 'nvd3';

import { Component } from '@angular/core';

@Component({
  selector: 'app-chart',
  template: `
    
  `,
  styles: [
    'nvd3 { width: 100%; height: 400px; }'
  ]
})
export class ChartComponent {
  options: any;
  data: any;

  constructor() {
    this.options = {
      chart: {
        type: 'lineChart',
        height: 400,
        margin: {
          top: 20,
          right: 20,
          bottom: 40,
          left: 55
        },
        x: function (d) { return d.x; },
        y: function (d) { return d.y; },
        useInteractiveGuideline: true,
        zoom: {
          enabled: true,
          scaleExtent: [1, 10],
          useFixedDomain: false,
          useNiceScale: false,
          horizontalOff: true,
          verticalOff: true,
          unzoomEventType: 'dblclick.zoom'
        },
        xAxis: {
          axisLabel: 'X轴',
          tickFormat: function (d) { return d3.format(',.1f')(d); }
        },
        yAxis: {
          axisLabel: 'Y轴',
          tickFormat: function (d) { return d3.format(',.1f')(d); },
          axisLabelDistance: -10
        }
      }
    };

    this.data = [
      {
        values: /* your data values here */,
        key: 'Series',
        color: '#ff7f0e'
      }
    ];
  }
}

3. 在你的模块中引入Nvd3Module：

import { Nvd3Module } from 'angular-nvd3';

@NgModule({
  imports: [
    Nvd3Module
  ],
  declarations: [
    ChartComponent
  ]
})
export class AppModule { }

4. 在你的模板中使用自定义的图表组件：

这样就可以在Angular NVD3折线图中实现缩放和拖动，并在图表区域之外可见。你可以根据自己的需求修改图表的配置和数据。