写一个点击不同诗歌主题,可以显示不同词云的d3.js代码
时间: 2024-02-13 13:00:18 浏览: 23
好的,以下是一个简单的示例代码,实现点击不同诗歌主题,显示不同词云的功能:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>诗歌主题词云</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<h1>诗歌主题词云</h1>
<div id="theme-buttons">
<button id="love-button">爱情</button>
<button id="nature-button">自然</button>
<button id="life-button">生活</button>
</div>
<div id="wordcloud"></div>
<script src="wordcloud.js"></script>
</body>
</html>
```
JavaScript 代码(wordcloud.js 文件):
```javascript
var themes = {
love: "爱情 爱 情人 心 花 女人 男人 吻 恋人",
nature: "自然 山水 花草 树木 天空 海洋 美景 风景",
life: "生活 时间 空间 家庭 工作 学习 旅行 健康"
};
var fill = d3.scaleOrdinal(d3.schemeCategory10);
var drawWordCloud = function(theme) {
var wordList = themes[theme].split(" ");
var layout = d3.layout.cloud()
.size([500, 300])
.words(wordList.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);
layout.start();
function draw(words) {
d3.select("#wordcloud").html("");
d3.select("#wordcloud").append("svg")
.attr("width", layout.size()[0])
.attr("height", layout.size()[1])
.append("g")
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 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; });
}
};
drawWordCloud("love");
d3.select("#love-button").on("click", function() {
drawWordCloud("love");
});
d3.select("#nature-button").on("click", function() {
drawWordCloud("nature");
});
d3.select("#life-button").on("click", function() {
drawWordCloud("life");
});
```
在这个示例中,我们首先定义了三个主题(爱情、自然、生活)和它们对应的关键词列表。然后使用 d3.layout.cloud() 函数生成词云布局,并根据主题的不同设置文本内容、字体大小等参数。最后,使用 d3.select() 函数监听按钮的点击事件,并在点击时调用 drawWordCloud() 函数重新绘制词云图形。