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, должен быть указан идентификатор единицы длины.