Угловой размер NVD3 в Angular Material $mddialog для заполнения содержимого диалога
Я использую 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 и заполнить всю область содержимого диалога?