在 Vega-Lite 重复图表中缩放、跟踪
Zooming, Tracking in Vega-Lite repeated chart
有没有办法让这个 vega-lite 图表具有交互性,例如
像这样缩放和跟踪
https://vega.github.io/editor/#/edited,
https://vega.github.io/vega-lite/examples/interactive_overview_detail.html
我已经试了好几天了,但没有任何效果——要么缩放比例关闭,要么多层与交互的组合似乎不起作用。
我至少需要一种方法来放大图表,包括工具提示 ...
{
"$schema":"https://vega.github.io/schema/vega-lite/v4.json",
"data":{
"values":[
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444444",
"lowval":45000,
"highval":45500,
"resultdecimal":45466
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444445",
"lowval":45000,
"highval":45500,
"resultdecimal":45433
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444446",
"lowval":45000,
"highval":45500,
"resultdecimal":45400
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444447",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444448",
"lowval":45000,
"highval":45500,
"resultdecimal":45403
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444449",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
}
]
},
"repeat":{
"layer":[
"lowval",
"highval",
"resultdecimal"
]
},
"spec":{
"mark":{
"type":"line",
"strokeWidth":3,
"point":{
"size":45,
"filled":true
}
},
"encoding":{
"x":{
"field":"serialnumber",
"type":"ordinal",
"axis":{
"labelAngle":-70,
"title":"Selected Tests",
"titleFontSize":10
}
},
"y":{
"field":{
"repeat":"layer"
},
"type":"quantitative",
"axis":{
"title":"Teststeps in selected Tests",
"titleFontSize":10
},
"scale":{
"domain":[
45000,
45500
]
}
},
"tooltip":[
{
"field":"serialnumber",
"type":"ordinal"
},
{
"field":"resultdecimal",
"type":"quantitative"
}
],
"color":{
"datum":{
"repeat":"layer"
},
"type":"nominal",
"scale":{
"range":[
"red",
"orange",
"blue",
"green"
]
}
}
}
},
"config":{
"font":"Roboto",
"axisX":{
"labelFontSize":9
},
"axisY":{
"labelFontSize":9
}
}
}
不,缩放行为仅在 Vega-Lite 中适用于定量轴,并且您的 x 轴数据不是定量的(它由字母数字代码组成)。
目前也无法在重复图层中使用比例限制选区(我怀疑这是一个错误),因此即使您将序列号转换为定量,也无法直接使用缩放。
解决这两个问题的一种方法是使用转换将序列号转换为数字,并使用 fold
而不是 repeat
(view in editor) 构建图表:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444444",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45466
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444445",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45433
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444446",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45400
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444447",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45422
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444448",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45403
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444449",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45422
}
]
},
"transform": [
{
"calculate": "parseInt(slice(datum.serialnumber, 2))",
"as": "serialnumber"
},
{"fold": ["lowval", "highval", "resultdecimal"], "as": ["column", "value"]}
],
"selection": {"zoom": {"type": "interval", "bind": "scales"}},
"mark": {
"type": "line",
"strokeWidth": 3,
"point": {"size": 45, "filled": true}
},
"encoding": {
"x": {
"field": "serialnumber",
"type": "quantitative",
"axis": {
"labelAngle": -70,
"title": "Selected Tests",
"titleFontSize": 10
}
},
"y": {
"field": "value",
"type": "quantitative",
"axis": {"title": "Teststeps in selected Tests", "titleFontSize": 10},
"scale": {"domain": [45000, 45500]}
},
"tooltip": [
{"field": "serialnumber", "type": "ordinal"},
{"field": "resultdecimal", "type": "quantitative"}
],
"color": {
"field": "column",
"type": "nominal",
"scale": {"range": ["red", "orange", "blue", "green"]}
}
},
"config": {
"font": "Roboto",
"axisX": {"labelFontSize": 9},
"axisY": {"labelFontSize": 9}
}
}
有没有办法让这个 vega-lite 图表具有交互性,例如 像这样缩放和跟踪 https://vega.github.io/editor/#/edited, https://vega.github.io/vega-lite/examples/interactive_overview_detail.html
我已经试了好几天了,但没有任何效果——要么缩放比例关闭,要么多层与交互的组合似乎不起作用。 我至少需要一种方法来放大图表,包括工具提示 ...
{
"$schema":"https://vega.github.io/schema/vega-lite/v4.json",
"data":{
"values":[
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444444",
"lowval":45000,
"highval":45500,
"resultdecimal":45466
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444445",
"lowval":45000,
"highval":45500,
"resultdecimal":45433
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444446",
"lowval":45000,
"highval":45500,
"resultdecimal":45400
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444447",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444448",
"lowval":45000,
"highval":45500,
"resultdecimal":45403
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444449",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
}
]
},
"repeat":{
"layer":[
"lowval",
"highval",
"resultdecimal"
]
},
"spec":{
"mark":{
"type":"line",
"strokeWidth":3,
"point":{
"size":45,
"filled":true
}
},
"encoding":{
"x":{
"field":"serialnumber",
"type":"ordinal",
"axis":{
"labelAngle":-70,
"title":"Selected Tests",
"titleFontSize":10
}
},
"y":{
"field":{
"repeat":"layer"
},
"type":"quantitative",
"axis":{
"title":"Teststeps in selected Tests",
"titleFontSize":10
},
"scale":{
"domain":[
45000,
45500
]
}
},
"tooltip":[
{
"field":"serialnumber",
"type":"ordinal"
},
{
"field":"resultdecimal",
"type":"quantitative"
}
],
"color":{
"datum":{
"repeat":"layer"
},
"type":"nominal",
"scale":{
"range":[
"red",
"orange",
"blue",
"green"
]
}
}
}
},
"config":{
"font":"Roboto",
"axisX":{
"labelFontSize":9
},
"axisY":{
"labelFontSize":9
}
}
}
不,缩放行为仅在 Vega-Lite 中适用于定量轴,并且您的 x 轴数据不是定量的(它由字母数字代码组成)。
目前也无法在重复图层中使用比例限制选区(我怀疑这是一个错误),因此即使您将序列号转换为定量,也无法直接使用缩放。
解决这两个问题的一种方法是使用转换将序列号转换为数字,并使用 fold
而不是 repeat
(view in editor) 构建图表:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444444",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45466
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444445",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45433
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444446",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45400
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444447",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45422
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444448",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45403
},
{
"stepid": "4444",
"stepname": "Name1",
"serialnumber": "SN3444449",
"lowval": 45000,
"highval": 45500,
"resultdecimal": 45422
}
]
},
"transform": [
{
"calculate": "parseInt(slice(datum.serialnumber, 2))",
"as": "serialnumber"
},
{"fold": ["lowval", "highval", "resultdecimal"], "as": ["column", "value"]}
],
"selection": {"zoom": {"type": "interval", "bind": "scales"}},
"mark": {
"type": "line",
"strokeWidth": 3,
"point": {"size": 45, "filled": true}
},
"encoding": {
"x": {
"field": "serialnumber",
"type": "quantitative",
"axis": {
"labelAngle": -70,
"title": "Selected Tests",
"titleFontSize": 10
}
},
"y": {
"field": "value",
"type": "quantitative",
"axis": {"title": "Teststeps in selected Tests", "titleFontSize": 10},
"scale": {"domain": [45000, 45500]}
},
"tooltip": [
{"field": "serialnumber", "type": "ordinal"},
{"field": "resultdecimal", "type": "quantitative"}
],
"color": {
"field": "column",
"type": "nominal",
"scale": {"range": ["red", "orange", "blue", "green"]}
}
},
"config": {
"font": "Roboto",
"axisX": {"labelFontSize": 9},
"axisY": {"labelFontSize": 9}
}
}