Uncaught TypeError：无法读取vega.js中未定义的属性'marktype'
问题描述：
我已经使用vega.js编写了一个词语云，用于处理具有该频率的单词。 的wordset看起来像这样追加到规范之前：Uncaught TypeError：无法读取vega.js中未定义的属性'marktype'
[{"text":"really","value":40},{"text":"people","value":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"
}
}
}
}
]
}
另外，代码给出了两个错误：
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
谁能帮我解决这个问题呢？
词云的书面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);
}
});
}
答
维加文档指出 “价值” 接受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);
}
});
...
不能调试vega.js你，但也许你应该考虑不使用'JSON.stringify（）'的'newtext'。这样它就不会被添加为一个大字符串而不是包含在JSON结构中，因为'newtext'似乎已经包含有效的JSON。 – t0mppa
tOmppa - 尽管我没有将JSON.stringify（）用于newtext，但会发生两个错误。 –
当我在vega编辑器中编写var text = {....}的spec部分时，它在编辑器上运行良好。我认为问题出现在将新文本附加到称为文本的规范时。有人可以帮我解决这个错误，请 –