Question

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

我在调试器中检查了该页面，我可以看到<svg>标记下有一个<g>标记。检查员将chrome中的 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

根据this dimple issue，我将父元素的样式设置为＆＃34; display：block＆＃34;现在这些图在Firefox中正确缩放。

以下是使用angular的示例：

<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>

在Firefox

1 个答案: