我做了几个凹坑的图表,它们在铬(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>
