nvd3 erreur graphique lors de l'affichage: aucun

J'utilise actuellement nvd3 pour la cartographie dans mon application. J'ai un problème en ce que si le div est caché via display:none avant que les graphiques sont rendus, les graphiques vont jeter une erreur, et lors de "décompresser" la div, je dois cliquer sur les graphiques pour les rendre correctement. Est-il possible de pré-rendre les graphiques même si la div est cachée? J'ai essayé de régler la largeur et la hauteur du svg parent avant d'appeler le graphique, mais en vain.nvd3 erreur graphique lors de l'affichage: aucun

nv.addGraph(function() { 
    //chart setup code 

    d3.select("#chart svg").attr("width", 300).attr("height", 500); 
    d3.select("#chart svg").datum(data).transition().duration(500).call(chart); 

    nv.utils.windowResize(chart.update); 
    return chart; 
});

Source

2013-07-11 Wei Hao

-1

Vous pouvez cacher un tableau - mais encore rendre le graphique - en utilisant une classe comme ceci:

.out-of-sight-and-space{ 
    visibility: hidden !important; 
    position: absolute !important; 
    top: 0 !important; 
}

Vous devriez appliquer à la mère du svg, dans votre cas #chart. Lorsque vous voulez afficher le graphique, supprimez la classe.

Source

2013-12-05 13:22:21 Nerian

Cela manque de contexte. Par exemple, à quel élément cette classe devrait-elle être appliquée? – metaColin

Aussi, cela ne fonctionne pas, je l'ai essayé à la fois sur le SVG et le conteneur parent. – metaColin

Définir ne fonctionne pas. – Nerian

Je compris comment faire un tableau caché auparavant rendu correctement sans avoir besoin de définir statiquement les dimensions de la zone graphique:

NVD3 Charts not rendering correctly in hidden tab

Cette solution dépend aussi de l'aide de JS pour afficher le contenu caché et en même temps, déclenchez un événement de redimensionnement qui force NVD3 à redimensionner le graphique désormais visible pour remplir le parent. Dans mon cas, je ne me suis pas soucié de SEO donc j'ai utilisé display: none; mais visibilité: caché; travaillerait aussi.

Source

2014-02-05 16:16:45 metaColin

ajouter ceci JavaScript:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    window.dispatchEvent(new Event('resize')); 
})

hidden.bs.tab est l'événement qui se déclenche après un nouvel onglet est affiché selon les docs Bootstrap. Ce code déclenche un événement de redimensionnement après chaque changement d'onglet.

Source

2015-04-02 05:10:55 nostromo

nvd3 erreur graphique lors de l'affichage: aucun

Répondre

Questions connexes