Diagramme de l'arbre: multiple sur une page

Question

J'essaye de mettre 2 diagrammes d'arbre de d3.js, comme vu ici http://bl.ocks.org/1249394 sur une page. Les deux arbres seront chargés avec des données différentes des objets Javascript. Le premier apparaît dans:

<div id="chart"></div> 

et le second arbre sera chargé dans:

<div id="chart2"></div> 

Les deux #chart et # chart2 sont sur la même page, le premier arbre (#chart) apparaissant en haut de la page, et le 2ème (# chart2) juste en dessous car c'est ainsi que les divs de la carte sont arrangés. Pour ce faire, j'ai appliqué deux fois le même code de http://bl.ocks.org/1249394. Un pour chaque div avec la seule différence entre les 2 morceaux de code étant l'emplacement de l'arbre qui est l'arbre 1: #chart et l'arbre 2: # chart2.

Arbre 1:

var vis = d3.select("#chart").append("svg:svg") 

Arbre 2:

var vis = d3.select("#chart2").append("svg:svg") 

Tout le reste demeure le même, y compris les noms de variables et de fonctions. Cela fonctionne très bien et les deux diagrammes s'affichent comme ils le devraient, à l'exception de la fonction de clic (dernière fonction dans le code:) Seul le second arbre est capable de réduire et de développer le clic des nœuds de l'arbre. Pour ce faire, le premier n'est plus interactif.

Comment résoudre ce problème?

Answer 1

Vous remplacez la variable vis lorsque vous dessinez le deuxième arbre dont dépend l'interaction. Si vous allez créer plusieurs graphiques, vous devez créer une clôture de sorte que chaque arbre se trouve dans sa propre portée. De cette façon, ils ne vont pas interférer les uns avec les autres. Mike a rédigé un article sur la création de graphiques réutilisables au http://bost.ocks.org/mike/chart/. Il marche à travers la création d'une fermeture et des propriétés de surfaçage.