在一个页面上显示两个d3单词云可以通过以下步骤实现:
<div id="wordcloud1"></div>
<div id="wordcloud2"></div>
// 创建第一个单词云
var wordcloud1 = d3.select("#wordcloud1")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// 使用数据集1生成单词云
var layout1 = d3.layout.cloud()
.size([width, height])
.words(data1.map(function(d) { return {text: d.word, size: d.weight}; }))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.fontSize(function(d) { return d.size; })
.on("end", draw1);
layout1.start();
// 创建第二个单词云
var wordcloud2 = d3.select("#wordcloud2")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// 使用数据集2生成单词云
var layout2 = d3.layout.cloud()
.size([width, height])
.words(data2.map(function(d) { return {text: d.word, size: d.weight}; }))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.fontSize(function(d) { return d.size; })
.on("end", draw2);
layout2.start();
// 绘制第一个单词云
function draw1(words) {
wordcloud1.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("fill", function(d, i) { return color(i); })
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
// 绘制第二个单词云
function draw2(words) {
wordcloud2.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("fill", function(d, i) { return color(i); })
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
以上代码示例中,需要根据实际情况调整单词云的大小、颜色等样式。同时,还可以根据需要添加交互效果、动画效果等。
总结:通过以上步骤,可以在一个页面上显示两个d3单词云。每个单词云都有自己的容器,并使用不同的数据集生成。可以根据实际需求进行定制和扩展。
领取专属 10元无门槛券
手把手带您无忧上云