Dimple js plot nie skaluje poprawnie w Firefox

Question

Zrobiłem kilka wykresów z dołeczkiem i wyglądają one dobrze w chromie (v 43), ale w Firefoksie (v 40) są renderowane niepoprawnie.

Sprawdziłem stronę w debugerze i widzę, że pod tagiem <svg> znajduje się znacznik <g>. Inspektor pokazuje znacznik w chrome jako i firefox jako 730x97, co oczywiście powoduje zniekształcony wykres.

Ten sam problem występuje na wielu wykresach - wykresach bąbelkowych, liniowych i słupkowych.

Używam dołek 2.1.6 i D3 3.5.6

Oto przykład z mojego kodu:

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>

Wszelkie sugestie jak to naprawić?

Edytuj: Po przeprowadzeniu niektórych badań odkryłem, że <g> to element kontenera służący do grupowania elementów graficznych, który pozwala elementom grupy, w tym przypadku svg, być traktowany jako jeden element. W inspektorze elementów svg wydaje się mieć prawidłowy rozmiar, ale najwyższy poziom nie ma wartości <g>. Podejrzewam, że domyślny domyślny Chrome domyślnie renderuje 100% wysokość/szerokość, a Firefox renderuje go w zależności od rozmiarów elementów.

Answer 1

Zgodnie z this dimple issue, ustawiłem styl elementu nadrzędnego na "display: block", a teraz działki skalują się poprawnie w Firefoksie.

Oto przykład przy użyciu kątowa:

<my-test-plot style="display:block" val="sourceData" /> 

ten zostanie rozszerzony:

<my-test-plot class="ng-isolate-scope" ... val="sourceData" style="display:block"> 
    <svg> 
    ... 
    </svg> 
</my-test-plot> 

Answer 2

Nie podano jednostki. Próbuję dodać "600px" zamiast tylko 600.

Dla właściwości zdefiniowanych w CSS2, należy podać identyfikator jednostki długości.