NVD3チャートを反応的にするには？

私はNVD3で作業しており、グラフの応答性に問題があります。NVD3チャートを反応的にするには？

これまではいくつかのグラフを作成していましたが、これらは常にコンテナをオーバーフローさせ、yAxisラベルを切り捨てたり、xAxisの四肢をカットしたりしていました。

ここではY軸が切断されているチャートの1の画像です：

これらは、私はチャートを作成するために使用しているコードスニペットです：

nv.addGraph(function() { 
 
    chart = nv.models.lineChart() 
 
    .useInteractiveGuideline(false); 
 

 
    if (data.hasOwnProperty("key") && isColumnTotalChart || isRowTotalChart) { 
 
    chart.xAxis 
 
     .axisLabel(data.chartDataset.key); 
 
    } 
 

 
    chart.xAxis.tickValues(data.chartLabelIndexes) 
 
    .tickFormat(function(d) { 
 
     return data.chartLabels[d]; 
 
    }); 
 

 
    chart.yAxis.tickFormat(d3.format(',.1f')); 
 

 
    if (chartData.labels.length > 10) { 
 
    chart.xAxis.rotateLabels(-90); 
 
    } 
 

 
    chart.xAxis.showMaxMin(true); 
 

 
    d3.selectAll(chartSelectedSvg + " > *").remove(); 
 

 
    d3.select(chartSelectedSvg) 
 
    .datum(data.chartDataset) 
 
    .transition().duration(500) 
 
    .call(chart); 
 

 
    nv.utils.windowResize(chart.update); 
 

 
    return chart; 
 
});

div>svg { 
 
    min-height: 30vh; 
 
    margin: 0 auto; 
 
    display: block; 
 
}

<div ng-show="chartColumnData.data.length !== 0"> 
 
    <div id="chartTotalColumns" ng-show="chartColumnData.data.length !== 0"> 
 
    <svg></svg> 
 
    </div> 
 
    <div layout="row" layout-padding layout-align="center center" ng-show="chartColumnData.data.length !== 0"> 
 
    </div> 
 
</div>

設定しようとしましたviewBoxおよびpreserveAspectRatio SVGのプロパティは使用できません。

また、私は失敗したこれらの質問で提案されたものを試してみました：

Responsive pie chart using NVD3

NVD3 Chart responsive issue

How to make a <svg> element expand or contract to its parent container?

あなたはこれらのチャートが応答にする方法についてどのような提案を持っていますか？

ありがとうございます。

出典

2017-09-05 m-oliv