Word cloud popup video

Question

Je viens de recevoir le modèle de nuage de mots de T3. Maintenant, j'ai ajouté un lien YouTube à chaque mot dans le nuage de mots, mais je veux que la vidéo apparaît pendant que je clique sur les mots dans le nuage de mots. Comment devrais-je modifier mon code? Merci beaucoup.

Voici mon Javascript:

<script> 
var fill = d3.scale.category20(); 
var words = [{"text":"Worry", "url":"http://google.com/"}, 
     {"text":"Choices", "url":"http://bing.com/"}, 
     ] 

var width = 1080; 
var height = 500; 
for (var i = 0; i < words.length; i++) { 
words[i].size = 10 + Math.random() * 90; 
} 

d3.layout.cloud() 
.size([width, height]) 
.words(words) 
.padding(5) 
.rotate(function() { return ~~ ((Math.random() * 6) - 3) * 30 + 8; }) 
.font("Impact") 
.fontSize(function(d) { return d.size;}) 
.on("end", draw) 
.start(); 

function draw(words) { 
    d3.select("#word-cloud") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate("+ width/2 +","+ height/2 +")") 
    .selectAll("text") 
    .data(words) 
    .enter() 
    .append("text") 
    .style("font-size", function(d) { return d.size + "px"; }) 
    .style("font-family", "Impact") 
    .style("fill", function(d, i) { return fill(i); }) 
    .attr("text-anchor", "middle") 
    .attr("transform", function(d) { 
     return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
    }) 
    .text(function(d) { return d.text; }) 
    .on("click", function (d, i){ 
    window.open(d.url, "_blank"); 
    }); 
} 

Answer 1

Mon approche proposée:

1. Créer une fenêtre modale
2. Ouvrez le modal quand un mot est cliqué
3. peuplent Dynamiquement le code embed dans le modal basé sur lequel le mot est cliqué (je n'ai pas fait cette partie pour vous, mais devrait être facilement faisable car il fait partie des données à accéder).

J'ai créé un JSFiddle qui vous fait la plupart du temps, des travaux supplémentaires nécessaires ici:

.on("click", function (d, i){ 
    // Dynamically populate embed 

    // Open the modal 
    document.getElementById('myModal').style.display = "block"; 
});