Dimple js не правильно масштабируется в Firefox
Я сделал несколько диаграмм с углублением, и они выглядят ОК в хроме (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>
Ответы
Ответ 1
По эта проблема с ямочками, я установил стиль родительского элемента в "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>
Ответ 2
Вы не указали единицу.
Я бы постарался добавить "600 пикселей" вместо 600.
Для свойств, определенных в CSS2, должен быть указан идентификатор единицы длины.