将字段设置为数组中的对象,Vega-lite
Setting a field to an object in an array, Vega-lite
我有一组对象,我将它们用作交互式数据仪表板中的数据集。我想添加一项新功能,一次只显示一个对象的数据,而不是从所有对象中提取数据(我已经在这样做并且效果很好)。作为测试用例,我创建了一个简单的数组:
var test1 = [
[{
"name": "Piece One",
"amount": 5
}, {
"name": "Piece Two",
"amount": 5
}, {
"name": "Piece Three",
"amount": 5
}],
[{
"name": "Piece One",
"amount": 1
}, {
"name": "Piece Two",
"amount": 1
}, {
"name": "Piece Three",
"amount": 5
}]
];
和 Vega-lite javascript:
var pieCreate = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": "A pie chart",
"description": "A simple pie chart with embedded data.",
"width": "container",
"height": "container",
"data": {
"values": test1[0]
},
"mark": "arc",
"encoding": {
"theta": {
"field": "amount",
"type": "quantitative"
},
"color": {
"field": "name",
"type": "nominal",
"legend": null
}
}
};
这可行,但我希望用户能够选择显示哪个对象(在仪表板中,每个对象包含不同学校的数据,我希望用户能够选择显示哪个学校的数据使用下拉菜单)。我的第一个想法是在 "data": {"values":
字段中设置一个信号,将括号中的数字更改为我想要的数组,但经过大量试验和错误后,我认为这可能是一个死胡同。信号 应该 可以修改 "field": "amount"
和 "field": "name"
但我已经尝试了我能想到的 [0].amount 的每次迭代,同时从test1[0]
但没有任何效果。如果我可以通过在 "field":
中直接引用它来设法访问该对象,我相信我可以使用信号和 html 形式找出过程,但我开始怀疑我是否还在这里是正确的轨道。
我也尝试了 vega-lite 文档中概述的过程:https://vega.github.io/vega-lite/tutorials/streaming.html,但它做的事情比我想做的要复杂得多,而且我的 javascript 知识是足以将其分解为可用的东西。有没有人对如何使用上述任何方法(或更好的新方法)来完成这项工作有任何想法?
您可以使用vega Api's更改数据。在您的选择上,添加一个更改事件,在某些情况下,您可以使用那些 API 在您的数据之间切换。
请参考以下代码片段或 fiddle:
var test1 = [
[{
"name": "Piece One",
"amount": 5
}, {
"name": "Piece Two",
"amount": 5
}, {
"name": "Piece Three",
"amount": 5
}],
[{
"name": "Piece One",
"amount": 1
}, {
"name": "Piece Two",
"amount": 1
}, {
"name": "Piece Three",
"amount": 5
}]
];
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": "A pie chart",
"description": "A simple pie chart with embedded data.",
"width": "350",
"height": "400",
"data": {
"values": test1[0]
},
"mark": "arc",
"encoding": {
"theta": {
"field": "amount",
"type": "quantitative"
},
"color": {
"field": "name",
"type": "nominal",
"legend": null
}
}
}
var view;
vegaEmbed("#vis", yourVlSpec).then(res => {
view = res.view;
});
function handleChange(a, b) {
var selectValue = document.getElementById("myselect").value;
if (selectValue == 'A') {
view.data('source_0', test1[0]);
} else {
view.data('source_0', test1[1]);
}
view.runAsync();
}
<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.17.0/build/vega-embed.min.js"></script>
<select id="myselect" style="width:100px;" onchange="handleChange()">
<option>A</option>
<option>B</option>
</select>
<br>
<div id="vis"></div>
我有一组对象,我将它们用作交互式数据仪表板中的数据集。我想添加一项新功能,一次只显示一个对象的数据,而不是从所有对象中提取数据(我已经在这样做并且效果很好)。作为测试用例,我创建了一个简单的数组:
var test1 = [
[{
"name": "Piece One",
"amount": 5
}, {
"name": "Piece Two",
"amount": 5
}, {
"name": "Piece Three",
"amount": 5
}],
[{
"name": "Piece One",
"amount": 1
}, {
"name": "Piece Two",
"amount": 1
}, {
"name": "Piece Three",
"amount": 5
}]
];
和 Vega-lite javascript:
var pieCreate = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": "A pie chart",
"description": "A simple pie chart with embedded data.",
"width": "container",
"height": "container",
"data": {
"values": test1[0]
},
"mark": "arc",
"encoding": {
"theta": {
"field": "amount",
"type": "quantitative"
},
"color": {
"field": "name",
"type": "nominal",
"legend": null
}
}
};
这可行,但我希望用户能够选择显示哪个对象(在仪表板中,每个对象包含不同学校的数据,我希望用户能够选择显示哪个学校的数据使用下拉菜单)。我的第一个想法是在 "data": {"values":
字段中设置一个信号,将括号中的数字更改为我想要的数组,但经过大量试验和错误后,我认为这可能是一个死胡同。信号 应该 可以修改 "field": "amount"
和 "field": "name"
但我已经尝试了我能想到的 [0].amount 的每次迭代,同时从test1[0]
但没有任何效果。如果我可以通过在 "field":
中直接引用它来设法访问该对象,我相信我可以使用信号和 html 形式找出过程,但我开始怀疑我是否还在这里是正确的轨道。
我也尝试了 vega-lite 文档中概述的过程:https://vega.github.io/vega-lite/tutorials/streaming.html,但它做的事情比我想做的要复杂得多,而且我的 javascript 知识是足以将其分解为可用的东西。有没有人对如何使用上述任何方法(或更好的新方法)来完成这项工作有任何想法?
您可以使用vega Api's更改数据。在您的选择上,添加一个更改事件,在某些情况下,您可以使用那些 API 在您的数据之间切换。 请参考以下代码片段或 fiddle:
var test1 = [
[{
"name": "Piece One",
"amount": 5
}, {
"name": "Piece Two",
"amount": 5
}, {
"name": "Piece Three",
"amount": 5
}],
[{
"name": "Piece One",
"amount": 1
}, {
"name": "Piece Two",
"amount": 1
}, {
"name": "Piece Three",
"amount": 5
}]
];
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": "A pie chart",
"description": "A simple pie chart with embedded data.",
"width": "350",
"height": "400",
"data": {
"values": test1[0]
},
"mark": "arc",
"encoding": {
"theta": {
"field": "amount",
"type": "quantitative"
},
"color": {
"field": "name",
"type": "nominal",
"legend": null
}
}
}
var view;
vegaEmbed("#vis", yourVlSpec).then(res => {
view = res.view;
});
function handleChange(a, b) {
var selectValue = document.getElementById("myselect").value;
if (selectValue == 'A') {
view.data('source_0', test1[0]);
} else {
view.data('source_0', test1[1]);
}
view.runAsync();
}
<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.17.0/build/vega-embed.min.js"></script>
<select id="myselect" style="width:100px;" onchange="handleChange()">
<option>A</option>
<option>B</option>
</select>
<br>
<div id="vis"></div>