未捕获的类型错误:无法读取 vega.js 中未定义的属性“标记类型”

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

本文关键字：标记类型 js 未定义 vega 属性 类型 错误 读取      更新时间：2023-09-26

我用vega写了一个词云.js来处理频率的单词。在附加到规范之前，单词集如下所示：

[{"文本"："真的"，"值"

：40}，{"文本"："人"，"值"：10}]

但是当它附加到规范时，它看起来像这样。

{
  "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"
          }
        }
      }
    }
  ]
}

代码还给出了两个错误：

未

捕获的类型错误：无法读取行中未定义的属性"值".js 4965

未

捕获的类型错误：无法读取行中未定义的属性"标记类型".js 9604

谁能帮我解决这个问题？

为词云编写的 javascript 函数。

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);
    }
  });
}

Vega 文档指出"值"接受 JSON。在您的情况下，新文本在某种程度上是字符串。尝试将解析代码替换为以下示例。

...
  $.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);
    }
  });
...

相关文章：