javascript - 使用 vega 创建更新的词云

Question

我正在 vega.js 的帮助下使用一系列字符串创建一个词云，同时逐个添加文本，我想更新我的词云。我的代码如下所示。 wordCloud 仅针对第一个文本字符串进行绘制。对于下一个字符串，它会在浏览器控制台上给出此错误。“view.data 未定义”有人可以帮我找到我的代码的解决方案吗？

$(document).ready(function(){

drawCloud("wordCloud");
});


function drawCloud(Htag){
    var htag="#"+Htag; var i=0;
    var TextData =["#Trump Where was Trump when Cruz was fighting Rubio and Schumer on amnesty for illegals? Cruz is the true conservative.","#RealDonaldTrump is the greatest business mind: https://t.co/nJZdbmkpJG https://t.co/pivvj0nvje","Trending Now: #Trump | #Oregon | #Debate | #Up | #China | #Sanders | #After | #Bundy | #Leader | #Obama via https://t.co/942kPJKfeu#RealDonaldTrump will save us: https://t.co/cSpSIMH5W9 https://t.co/AYUHae69bb","#RealDonaldTrump is the greatest business mind: https://t.co/nJZdbmkpJG https://t.co/W8LvHyQl9l","You change default value in MySQL configuration file (option connect_timeout in mysqld section) -","Also there are two other timeouts too which are configurable by above methods; wait_timeout & interactive_timeout. For detailed information check link; rackspace.com/knowledge_center/article/"];
    var textData="";
     var stopWords ="(i|me|my|myself|we|us|our|just|ours|ourselves|you|your|yours|yourself|yourselves|he|him|his|himself|she|her|hers|herself|it|its|itself|they|them|their|theirs|themselves|what|which|who|whom|whose|this|that|these|those|am|is|are|was|were|be|been|being|have|has|had|having|do|does|did|doing|will|would|should|can|could|ought|i'm|you're|he's|she's|it's|we're|they're|i've|you've|we've|they've|i'd|you'd|he'd|she'd|we'd|they'd|i'll|you'll|he'll|she'll|we'll|they'll|isn't|aren't|wasn't|weren't|hasn't|haven't|hadn't|doesn't|don't|didn't|won't|wouldn't|shan't|shouldn't|can't|cannot|couldn't|mustn't|let's|that's|who's|what's|here's|there's|when's|where's|why's|how's|a|an|the|and|but|if|or|because|as|until|while|of|at|by|for|with|about|against|between|into|through|during|before|after|above|below|to|from|up|upon|down|in|out|on|off|over|under|again|further|then|once|here|there|when|where|why|how|all|any|both|each|few|more|most|other|some|such|no|nor|not|only|own|same|so|than|too|very|say|says|said|shall|trump|donaldtrump|hillary|clinton|hillaryclinton|ted|cruz|tedcruz|rick|santorum|ricksantorum|marco|rubio|marcorubio|mike|huckabee|mikehuckabee|martin|omalley|martinomalley|carly|fiorina|carlyfiorina|rand|paul|randpaul|john|kasich|johnkasich|ben|carson|bencarson|lindsley|graham|lindsleygraham|scott|walker|scottwalker|jim|gilmore|jimgilmore|jeb|bush|jebbush|http|https|chris|christie|chrischristie|pataki|george|georgepataki|election|election2016)";
     var colorRange=["#fc61e2","#7d3070","#511f49"];
     var width = $(htag).width();
     var height = $(htag).height();
     var text={};
      var view={}; var viewUpdateFunction;
 for(;i<TextData.length;i++){
            var shortText= TextData[i];
            var urlRegex = /(https?:\/\/[^\s]+)/g;
             var characterRegex=/[^a-z]+|\s+/gmi;
           shortText =shortText.replace(urlRegex," ").replace(characterRegex," ");

           if(i==0){

                               text={
                                                      "width":width,
                                                      "height": height,
                                                      "padding": {"top":0, "bottom":0, "left":0, "right":0},

                                                      "data": [
                                                        {
                                                          "name": "table",
                                                          "values": [ shortText
                                                              ],

                                                          "transform": [
                                                            {
                                                              "type": "countpattern",
                                                              "field": "data",
                                                              "case": "upper",
                                                              "pattern": "[\\w']{3,}",
                                                              "stopwords": stopWords
                                                            },
                                                            {
                                                              "type": "formula", "field": "angle",
                                                              "expr": "[-45, 0, 45][~~(random() * 3)]"
                                                            },
                                                            {
                                                              "type": "formula", "field": "weight",
                                                              "expr": "if(datum.text=='VEGA', 600, 300)"
                                                            },
                                                            {
                                                              "type": "wordcloud",
                                                              "size": [800, 400],
                                                              "text": {"field": "text"},
                                                              "rotate": {"field": "angle"},
                                                              "font": {"value": "Arial"},
                                                              "fontSize": {"field": "count"},
                                                              "fontWeight": {"field": "weight"},
                                                              "fontScale": [10, 40]
                                                            }
                                                          ]
                                                        }
                                                      ],

                                                      "scales": [
                                                        {
                                                          "name": "color",
                                                          "type": "ordinal",
                                                          "range":["#fc61e2","#7d3070","#511f49"]
                                                        }
                                                      ],

                                                      "marks": [
                                                        {
                                                          "type": "text",
                                                          "from": {"data": "table"},
                                                          "properties": {
                                                            "enter": {
                                                              "x": {"field": "layout_x"},
                                                              "y": {"field": "layout_y"},
                                                              "angle": {"field": "layout_rotate"},
                                                              "font": {"field": "layout_font"},
                                                              "fontSize": {"field": "layout_fontSize"},
                                                              "fontStyle": {"field": "layout_fontStyle"},
                                                              "fontWeight": {"field": "layout_fontWeight"},
                                                              "text": {"field": "text"},
                                                              "align": {"value": "center"},
                                                              "baseline": {"value": "alphabetic"},
                                                              "fill": {"scale": "color", "field": "text"}
                                                            },
                                                            "update": {
                                                              "fillOpacity": {"value": 1}
                                                            },
                                                            "hover": {
                                                              "fillOpacity": {"value": 0.5}
                                                            }
                                                          }
                                                        }
                                                      ]

                                         };


                viewUpdateFunction = (function(chart) {
           		view = chart({el:htag}).update();
           		}).bind(view);
           		vg.parse.spec(text, viewUpdateFunction);
               


           }else{

             view.data.values.insert([{shortText}]);

             view.update();

           }

        }

}

<html lang="en">

    <head>

    </head>

    <body >


        <!-- Page Content -->
        <div class="container">

            <!-- Page Header -->
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h1 class="page-header text-center">Vega</h1>
                    <h2 class="page-sub-header text-center">Word Cloud</h2>
                </div>
            </div>
       
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                    <h3>Wword Cloud Example</h3>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="cloudWord-graph" style="width:800px; length:800px; " id="wordCloud"></div>
                        </div>
                    </div>
                </div>
               
             </div>
             
        </div>
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    </body>

</html>

Answer 1

我找到了答案。我已经把解决方案放到了github上。 https://github.com/GDRDABARERA/UpdatingVegaWordCloud