如何使 NVD3 图表响应？答案

【问题标题】：How to make NVD3 charts responsive?如何使 NVD3 图表响应？
【发布时间】：2018-02-13 15:18:41
【问题描述】：

我正在使用 NVD3，但图表的响应能力有些问题。

到目前为止，我已经设法创建了几个图表，但这些图表总是溢出容器，导致 yAxis 标签被剪切或 xAxis 末端被剪切。

这是其中一个图表的图像，其中 y 轴被切割：

这些是我用来创建图表的代码 sn-ps：

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>

我尝试设置 SVG 的 viewBox 和 preserveAspectRatio 属性，但无济于事。

我也没有成功尝试过这些问题中的建议：

Responsive pie chart using NVD3

NVD3 Chart responsive issue

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

您对如何使这些图表具有响应性有什么建议吗？

谢谢。

【问题讨论】：

标签： javascript css svg charts nvd3.js

【解决方案1】：

读完后：

Y axis label not displaying large numbers - Multi-Bar Chart

我已经弄清楚了：只需调整边距即可解决问题。

According to the documentation，要调整所有图表边距，您必须使用这行代码：

chart.margin({"left":5,"right":5,"top":10,"bottom":10})

如果您只需要设置一个边距，那么您必须这样做：

chart.margin().left = 50;

现在图表如下所示：

【讨论】：