Dimple js在Firefox中无法正确缩放

Question

我制作了一些带有凹坑的图表,它们在铬中看起来很好(第43节),但在Firefox(第40版)中它们的渲染不正确.

我在调试器中检查了页面,我可以看到<svg>标签下面有一个<g>标签.检查员显示摹铬标记为720x556,并在Firefox为730x97,这显然会导致一个扭曲的阴谋.

在许多图表上都会出现同样的问题 - 气泡图,折线图和条形图.

我正在使用dimple 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根据其中元素的大小呈现它.

Answer 1

根据这个酒窝问题，我将父元素的样式设置为“display:block”，现在绘图在 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>