JavaScript – Dimple js plot在Firefox中无法正确缩放

我做了几个凹坑的图表,它们在铬(v 43)中看起来很好,但是在Firefox(40)中,它们呈现不正确.

我检查了调试器中的页面,我可以看到,在< svg>标签上有一个< g>标签.检查员将chrome中的g标签显示为720×556,在firefox中显示为730×97,这显然导致了一个扭曲的情节.

同样的问题发生在许多曲线 – 气泡,线条和条形图.

我使用的是微软2.1.6和d3 3.5.6

以下是我的代码示例：

link: function(scope,element,attrs) {
  var svg = dimple.newSvg(element[0],800,600);
  svg.text("Charttitle");
  var myChart = new dimple.chart(svg,data);

  myChart.addCategoryAxis("x","column1");
  myChart.addCategoryAxis("y","column2");
  myChart.addCategoryAxis("z","column3");
  myChart.addSeries("column1",dimple.plot.bubble);

  myChart.draw();
}

<div ng-view class="ng-scope">
  <div class="col-md-12 ng-scope" ng-controller="MyController">
    <traffic-plot val="p2pTraffic" load-data="loadData(ip)" class="ng-isolate-scope">
      <svg width="800" height="600">
        <g>
           <!-- The rest of the dimple generated code -->
        </g>
      </svg>
   </traffic-plot>
 </div>
</div>

任何建议如何解决这个问题？

编辑：在进行了一些研究之后,我发现< g>是用于对图形元素进行分组的容器元素,允许将组件元素(在这种情况下为svg)作为一个元素来处理.
在元素检查器中,svg看起来具有正确的大小,但顶级< g>不是.
我怀疑Chrome默认显示为100％的高度/宽度,而Firefox根据其中的元素的大小呈现它.

解决方法

根据 this dimple issue,我将父元素的样式设置为“显示：块”,现在绘图在Firefox中正确缩放.

这是一个使用角度的例子：

<my-test-plot style="display:block" val="sourceData" />

这扩展到：

<my-test-plot class="ng-isolate-scope" ... val="sourceData" style="display:block">
  <svg>
     ...
  </svg>
</my-test-plot>