1

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); 長さがそれぞれ 2 の 100 (オブジェクト?) の配列を示していますが、ワードクラウドは表示されません。ブラウザのコンソールに、wordcloud2.js が list : wordCloudGWT を (誤って) あるべきだと思うように解釈していないためと思われるエラーが表示されます。

この方法でリストの作成をブルートフォースすると

  list : [ 
  [data[0].wordCloud, "9"],
  [data[1].wordCloud, "3"],
  [data[2].wordCloud, "8"], 
  [data[3].wordCloud, "5"]
  ],

単語は正しく表示されますが、このアプローチには 2 つの問題があります。

  • 単語の実際の頻度 (単語のサイズ) は考慮されません
  • 手動で 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 エラーで終了します。

困難を回避するのに役立つヒントはありますか?

4

2 に答える 2

0

Array.mapデータのフォーマットに使用できます。

var formattedList = responseData.map(function(item) {
    return [item.wordCloud, item.Freq]
});

デモ: http://jsfiddle.net/64v75enq/

于 2015-04-07T23:57:51.787 に答える