1

I have written a word cloud using vega.js to work for words with the frequency. The wordset looks like this before appending to the spec:

[{"text":"really","value":40},{"text":"people","value":10}]

But when it appends to the spec it looks like this.

{
  "name":"wordcloud",
  "width":698.181818,
  "height":198.181818,
  "padding":{
  "top":0,
  "bottom":0,
  "left":0,
  "right":0
  },
  "data":[
    {
      "name":"table",
      "values":"[{\"text\":\"really\",\"value\":40},{\"text\":\"people\",\"value\":10}]",
      "transform":[
        {
          "type":"wordcloud",
          "text":"data.text",
          "font":"Helvetica Neue",
          "fontSize":"data.value",
          "rotate":{
            "random":[-90,-45,0,45,90]
          }
        }
      ]
    }
  ],
  "marks":[
    {
      "type":"text",
      "from":{
        "data":"table"
      },
      "properties":{
        "enter":{
          "x":{
            "field":"x"
          },
          "y":{
            "field":"y"
          },
          "angle":{
            "field":"angle"
          },
          "align":{
            "value":"center"
          },
          "baseline":{
            "value":"alphabetic"
          },
          "font":{
            "field":"font"
          },
          "fontSize":{
            "field":"fontSize"
          },
          "text":{
            "field":"data.text"
          }
        },
        "update":{
          "fill":{
            "value":"#f48fb1"
          }
        },
        "hover":{
          "fill":{
            "value":"#f00"
          }
        }
      }
    }
  ]
}

Also the code gives two errors:

Uncaught TypeError: Cannot read property 'value' of undefined in line vega.js 4965

Uncaught TypeError: Cannot read property 'marktype' of undefined in line vega.js 9604

Can anyone help me to solve this problem?

The written javascript function for the word cloud.

var textData="";

function drawPersonWordCloud(cloudDiv ,Pname ,color){
  getPersonDataCloud( cloudDiv,Pname ,color );
  setInterval(function() {
    // Do something every 5 minutes
    getPersonDataCloud( cloudDiv,Pname ,color );

  }, 300000);
}

function updatePersonText( newtext, cloudDiv,color){
  var cloudDivID ="#"+cloudDiv;
  var width = $(cloudDivID).width();
  var height = $(cloudDivID).height();
  console.log(JSON.stringify(newtext));
  //var  colorset =[color,"#6d4c41","#000000"];
  //console.log(width);
            
  var text={
    "name": "wordcloud",
    "width": width,
    "height": height,
    "padding": {"top":0, "bottom":0, "left":0, "right":0},
    "data": [
      {
        "name": "table",
        "values": newtext,
        "transform": [
          {
            "type": "wordcloud",
            "text": "data.text",
            "font": "Helvetica Neue",
            "fontSize": "data.value",
            "rotate": {"random": [-90,-45,0,45,90]}
          }
        ]
      }
    ],
    "marks": [
      {
        "type": "text",
        "from": {"data": "table"},
        "properties": {
          "enter": {
            "x": {"field": "x"},
            "y": {"field": "y"},
            "angle": {"field": "angle"},
            "align": {"value": "center"},
            "baseline": {"value": "alphabetic"},
            "font": {"field": "font"},
            "fontSize": {"field": "fontSize"},
            "text": {"field": "data.text"}
          },
          "update": {
            "fill": {"value": color}
          },
          "hover": {
            "fill": {"value": "#f00"}
          }
        }
      }
    ]
  };

  return text;
}

function getPersonDataCloud(cloudDiv, Pname,color){
  var cloudDivID="#"+cloudDiv;
  var newTestString=" ";
  var JSONObj = new Object();
  var Candidates = { Choose : Pname};

  $.ajax({
    url: "js/candidateCloud.jag",
    dataType: "json",
    contentType:'application/json',
    data: JSON.stringify(Candidates),
    type: "POST",
    success: function (data) {     
      var TextData=JSON.stringify(data);
      var res = TextData.split(";");
      var jsonStr='{"values":[]}';
      JSONObj=JSON.parse(jsonStr);                                

      for(var i=1;i<res.length-1;i++){
        var text=res[i];
        var array= text.split(":");
        var str= '{"text": "'+array[0]+'", "value":'+(array[1]*10)+'}';
        JSONObj["values"].push(JSON.parse(str));
      }
                               
      console.log(JSON.stringify(JSONObj["values"]));
      var newcloud =updatePersonText(JSONObj["values"],cloudDiv,color);
      console.log(JSON.stringify(newcloud));

      var viewUpdateFunction = (function(chart) {
        this.view = chart({el:cloudDivID}).update();
      }).bind(this);

      vg.parse.spec(newcloud, viewUpdateFunction);
    }
  });
}

4

1 回答 1

0

Vega 文档指出“值”接受 JSON。在您的情况下， newtext 是某种方式的字符串。尝试用下面的例子替换解析代码。

...
  $.ajax({
    url: "js/candidateCloud.jag",
    dataType: "json",
    contentType:'application/json',
    data: JSON.stringify(Candidates),
    type: "POST",
    success: function (data) {     
      var TextData=JSON.stringify(data);
      var res = TextData.split(";");
      //var jsonStr='{"values":[]}';
      JSONObj=[];                                

      for(var i=1;i<res.length-1;i++){
        var text=res[i];
        var array= text.split(":");
        var str= '{"text": "'+array[0]+'", "value":'+(array[1]*10)+'}';
        JSONObj.push(JSON.parse(str));
      }
                               
      console.log(JSON.stringify(JSONObj["values"]));
      var newcloud =updatePersonText(JSONObj,cloudDiv,color);
      console.log(JSON.stringify(newcloud));

      var viewUpdateFunction = (function(chart) {
        this.view = chart({el:cloudDivID}).update();
      }).bind(this);

      vg.parse.spec(newcloud, viewUpdateFunction);
    }
  });
...

于 2016-03-15T05:44:45.423 回答