svg折线图的工具提示超出了屏幕范围

Question

我正在将nvd3 svg图表用于应用程序。

当我将鼠标悬停在工具提示上时，工具提示超出了我的屏幕宽度，并且出现了滚动条。但是我希望工具提示停留在屏幕中并向左和向右移动。

我尝试添加html代码以删除滚动，但是它不起作用。

  $scope.lineOptionsTrans = {
    chart: {
      type: 'lineChart',
      height: 450,
      width : 900,
      fill : "none" ,
      margin : {
    top: 20,
    right: 20,
    bottom: 50,
    left: 70
      },
      x: function(d){ return d.x; },
      y: function(d){ return parseInt(d['num']); },
      useInteractiveGuideline: true,
      dispatch: {
    stateChange: function(e){ console.log("stateChange"); },
    changeState: function(e){ console.log("changeState"); },
    tooltipShow: function(e){ console.log("tooltipShow"); },
    tooltipHide: function(e){ console.log("tooltipHide"); }
      },
      xAxis: {
    axisLabel: 'Time',
    ticks: 10,
    tickFormat: function (d) {
      //          console.log("Line Chart: ",d);
      return getLabel(d);
    }
      },
      yAxis: {
    axisLabel: 'Transaction Count',
    tickFormat: function(d) {
      return d3.format(',.0f')(d);
    }
      },
      callback: function(chart){
    //console.log("!!! lineChart callback !!!");
      }
    }
  };

这是我的html代码：-

<nvd3 ng-show = "searching == 0"   options='lineOptionsVio'
              data='lineData' api="apiLine" style="height:400px;width:900px;"></nvd3>

我希望工具提示停留在屏幕中并左右移动。