我正在尝试使用wordcloud2.js生成一些词云。使用给出的示例效果很好:
var options =
{
list : [
["Pear", "9"],
["Grape", "3"],
["Pineapple", "8"],
["Apple", "5"]
],
gridSize: Math.round(16 * document.getElementById('canvas_cloud').offsetWidth / 1024),
weightFactor: function (size) {
return Math.pow(size, 1.9) * document.getElementById('canvas_cloud').offsetWidth / 1024;
}
}
WordCloud(document.getElementById('canvas_cloud'), options);
但是,我正在努力使用具有以下结构的 JSON 文件中的数据填充“list :”:
[
{
"wordCloud": "Manchester",
"Freq": 2321
},
{
"wordCloud": "Munich",
"Freq": 566
},
{
...
},
{
"wordCloud": "Madrid",
"Freq": 6
}
]
我知道这是因为我对将值推送到数组的知识有限。到目前为止,我的尝试是:
$.getJSON('json/wordCloudGWT-' + site + '.json', function (data) {
var wordCloudGWT = [];
for (var i=0;i<100;i++) {
wordCloudGWT.push([data[i].wordCloud, data[i].Freq]);
};
console.log(wordCloudGWT);
var options =
{
list : wordCloudGWT,
gridSize: Math.round(16 * document.getElementById('canvas_cloud').offsetWidth / 1024),
weightFactor: function (size) {
return Math.pow(size, 1.9) * document.getElementById('canvas_cloud').offsetWidth / 1024;
}
}
WordCloud(document.getElementById('canvas_cloud'), options);
console.log(wordCloudGWT);显示一个包含 100 个(对象?)且每个长度为 2 的数组,但字云未显示。我在浏览器的控制台中看到一个错误,我认为这是因为 wordcloud2.js 没有像我(错误地)认为应该那样解释 list : wordCloudGWT 。
如果我以这种方式暴力创建列表
list : [
[data[0].wordCloud, "9"],
[data[1].wordCloud, "3"],
[data[2].wordCloud, "8"],
[data[3].wordCloud, "5"]
],
单词显示正确,但这种方法有两个问题:
- 不考虑单词的真实频率(单词的大小)
- 肯定有更优雅的方法来生成列表,例如手动添加 100 行代码
对于第一点,我认为我可以通过这种方式手动编辑列表来解决问题:
list : [
[data[0].wordCloud, data[0].Freq],
[data[1].wordCloud, data[1].Freq],
[data[2].wordCloud, data[2].Freq],
[data[3].wordCloud, data[3].Freq]
],
但是,这样做会导致与我第一次尝试相同的 JS 错误。
有什么提示可以帮助我克服困难吗?
最佳答案
您可以使用Array.map
来格式化数据:
var formattedList = responseData.map(function(item) {
return [item.wordCloud, item.Freq]
});
关于javascript - 从 JSON 填充列表(不是 HTML),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29503413/