2D文字云是一種非常時尚和有趣的設計元素，它可以用來增加網頁的視覺吸引力和閱讀體驗。下面是一個簡單的HTML源代碼，用于創建2D文字云。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2D文字云</title>
</head>
<body>
<div id="wordcloud">
<ul>
<li>Hello</li>
<li>World</li>
<li>Web</li>
<li>Design</li>
<li>Coding</li>
<li>Art</li>
<li>Typography</li>
</ul>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
// 創建一個2D文字云的函數
function createWordCloud(selector) {
var svgWidth = 500;
var svgHeight = 500;
// 設置d3更新數據綁定的唯一標識符
function keyFunction(d) {
return d.text;
}
// 創建一個d3詞云實例
var cloud = d3.layout.cloud()
.size([svgWidth, svgHeight])
.words(selector.innerText.trim().split(/\s+/).map(function(d) {
return {text: d, size: 10 + Math.random() * 50};
}))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw);
// 用d3創建svg元素
var svg = d3.select("#wordcloud").append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
// 定義繪制函數
function draw(words) {
svg.selectAll("text")
.data(words, keyFunction)
.enter().append("text")
.attr("class", "word")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return d3.schemeCategory10[i % 10]; })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
// 開始繪制2D文字云
cloud.start();
}
// 執行創建詞云的函數
createWordCloud(document.querySelector("#wordcloud ul"));
</script>
</body>
</html>上一篇20行html代碼是什么
下一篇用圖片做邊框的css屬性