Angular Material中的Angular NVD3大小$ mddialog用于填充对话框内容

Question

我正在使用angular-1.5.8,d3-3.5.17,nvd3-1.8.5和angular-nvd3-1.0.9与Angular Material.我正在尝试将NVD3指令放入$mdDialog.源代码很简单:

<md-dialog aria-label="FooBar">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>FooBar/h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="dialog.close()">
        <md-icon>close</md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <md-dialog-content>
    <nvd3 options="dialog.options" data="dialog.data"></nvd3>
  </md-dialog-content>

  <md-dialog-actions>
    <md-button ng-click="dialog.close()">
      Close
    </md-button>
  </md-dialog-actions>
</md-dialog>

我使用$mdDialog.show()带fullscreen: true.如你所知fullscreen: true,如果浏览器窗口足够小,对话框只会全屏显示.

无论如何,我对类型图表有很多问题scatterChart.这里有几个大的:

• 16点的散点图显示真的非常小!我不想在宽度/高度上进行硬编码.是否有一个NVD3的缩放选项,说"显示你通常会增加的尺寸"？
• 如果我让浏览器(Chrome)足够小,mdDialog会突然弹出全屏!并且NVD3图表动态扩展以填充整个宽度!太酷了!但图表的高度保持不变.现在我有一张宽度很小的宽图表; mdDialog关闭按钮几乎位于屏幕顶部,下方有一个巨大的空白.
• 如果我手动设置<md-dialog-content style="min-width=500px;min-height=300px">只是一个例子,同样的事情发生:NVD3电荷水平扩展以填充宽度,但图表下方,关闭按钮上方有一个巨大的空白区域.

如何让NVD3图表与mdDialog很好地配合,并填充整个对话框内容区域？