Я сделал несколько диаграмм с углублением, и они выглядят ОК в хроме (v 43), но в Firefox (v 40) они отображаются некорректно.
Я проверил страницу в отладчике, и я вижу, что в теге <svg>
есть тег <g>
. Инспектор показывает тег g в хром как 720x556, а в firefox - 730x97, что, очевидно, приводит к искажению графика.
Такая же проблема возникает и на ряде графиков: пузырьковые, линейные и гистограммы.
Я использую ямочку 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>