Il diagramma di Dimple js non viene ridimensionato correttamente in Firefox

Question

Ho creato alcuni grafici con la fossetta e hanno un aspetto OK in chromium (v 43), ma in Firefox (v 40) sono visualizzati in modo errato.

Ho ispezionato la pagina nel debugger e vedo che sotto il tag <svg> c'è un tag <g>. L'ispettore mostra il tag g in chrome come 720x556 e in firefox come 730x97, che ovviamente risulta in una trama distorta.

Lo stesso problema si verifica su un numero di grafici - grafici a bolle, linee e a barre.

sto usando fossetta 2.1.6 e 3.5.6 d3

Ecco un esempio del mio codice:

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>

Eventuali suggerimenti su come risolvere questo problema?

Modifica: Dopo aver effettuato alcune ricerche, ho scoperto che lo <g> è un elemento contenitore utilizzato per il raggruppamento di elementi grafici che consente agli elementi di gruppo, in questo caso svg, di essere gestiti come un unico elemento. Nell'ispettore elemento, la dimensione svg sembra avere la dimensione corretta, ma il livello superiore <g> no. Sospetto che Chrome lo restituisca con il 100% di altezza/larghezza, mentre Firefox lo rende in base alle dimensioni degli elementi in esso contenuti.

Answer 1

Come da this dimple issue, ho impostato lo stile dell'elemento genitore su "display: block" e ora i grafici vengono ridimensionati correttamente in Firefox.

Ecco un esempio di utilizzo angolare:

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

questo viene ampliato a:

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

Answer 2

Non è stata specificata un'unità. Vorrei provare ad aggiungere "600px" anziché solo 600.

Per le proprietà definite nei CSS2, è necessario fornire un identificatore di unità di lunghezza.