词云图的html代码
时间: 2024-06-09 12:03:43 浏览: 11
词云图是一种数据可视化的方式,它可以将一些关键词按照出现频率和重要性的大小呈现出来,给用户直观的展示。以下是一个简单的词云图的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>词云图</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.min.js"></script>
</head>
<body>
<div id="wordcloud"></div>
<script>
var words = [
"data", "visualization", "web", "development", "programming",
"design", "user", "interface", "experience", "mobile"
];
d3.layout.cloud().size([500, 500])
.words(words.map(function(d) {
return {text: d, size: 10 + Math.random() * 90};
}))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
d3.select("#wordcloud").append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform", "translate(250,250)")
.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 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; });
}
</script>
</body>
</html>
```
这个例子使用了d3和d3-cloud两个JavaScript库来创建词云图。其中,`words`数组中存放了要展示的关键词,每个关键词有一个权重值(size)。在`d3.layout.cloud()`中对这些关键词进行处理,最终得到一个包含坐标、大小、旋转角度等信息的数组`words`,然后将其渲染到HTML页面中。