字雲彈出視頻

我剛剛從T3獲得了雲字模板。現在，我爲詞雲中的每個單詞添加了一個YouTube鏈接，但我希望在點擊詞雲中的單詞時彈出視頻。我應該如何修改我的代碼？非常感謝。字雲彈出視頻

這裏是我的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"); 
    }); 
}

來源

2017-09-04 Yu Yan

所以現在它打開URL在一個新的窗口，對不對？如果是這種情況，而不是使用「window.open」代碼，我建議尋找觸發包含嵌入式視頻的Modal Popup。 – Nick

我建議的方法：

創建一個模式窗口
打開時，點擊一個字
動態填充嵌入代碼爲模態基於哪個單詞被點擊的模式（我沒有爲你做這個部分，但應該很容易做到，因爲它是訪問數據的一部分）。

我創建了一個JSFiddle，讓你最的方式，更多的工作需要在這裏：

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

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

來源

2017-09-05 01:01:52 Nick

字雲彈出視頻

回答

相關問題