Dimple js 绘图在 Firefox 中无法正确缩放

Question

我制作了一些带有酒窝的图表，它们在 chromium (v 43) 中看起来不错，但在 Firefox (v 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

您没有指定单位。我会尝试添加“600px”而不仅仅是 600。

对于 CSS2 中定义的属性，必须提供长度单位标识符。

Answer 2

根据 this dimple issue，我将父元素的样式设置为 "display:block"，现在绘图在 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>

Dimple js 绘图在 Firefox 中无法正确缩放

Dimple js plot not scaling correctly in Firefox

javascript

firefox

d3.js

angularjs

dimple.js