Angular Material Layout 中的 C3 图形显示问题答案

【问题标题】：C3 graph displaying issue in Angular Material LayoutAngular Material Layout 中的 C3 图形显示问题
【发布时间】：2015-11-14 03:43:49
【问题描述】：

我在 AMD 布局中显示图表时遇到了一个奇怪的问题。我在两个小部件中定义了图表，如下所示 - 您可以看到小部件中的图表超出了它们的区域

我已尝试在plunker 中重现此错误，但没有任何问题：/

当我在浏览器中进行小改动（例如，我移动浏览器的边缘）时，图表会返回正确的位置 -> http://recordit.co/mRmNAjH840

<div layout="row" ng-controller="GraphCtrl" layout-md="column" layout-sm="column" layout-margin="">

    <section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="66" flex-gt-md="66">
        <div class="panel-heading">Widget1<span flex=""></span>
        </div>
        <div class="panel-body">
            <div id="chart1"></div>
        </div>
    </section>

    <section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="32" flex-gt-md="32">
        <div class="panel-heading">Widget2<span flex=""></span>
        </div>
        <div class="panel-body">
            <div id="c3_combined"></div>
        </div>
    </section>
</div>

【问题讨论】：

也许c3_combined 和chart1 div 在图表呈现后会以某种方式调整大小。
嗯，我已经包含了c3-angular-directive 并且指令看起来不错：/
我还注意到，在没有 c3-angular-directive 的情况下，在较低分辨率下（智能手机）看起来没问题

标签： angularjs d3.js flexbox angular-material c3.js

【解决方案1】：

我不确定这是否与您的问题有关，但在 IE 上，我必须手动添加此 CSS 属性：

svg { overflow: hidden; }

【讨论】：