[Bug] animation of updateSpec

[skie1997]

Version

0.3.3

Link to Minimal Reproduction

null

Steps to Reproduce

const spec = {
"padding": {
"top": 15,
"right": 40,
"bottom": -20,
"left": 40
},
"background": "rgba(0,0,0)",
"data": [
{
"id": "chartData",
"values": [
{
"kA3dEBjyp1Iw": "浙江省",
"WEufOgiUGAet": 98,
"VGRAMMAR_DATA_ID_KEY_3618": 0
},
{
"kA3dEBjyp1Iw": "重庆市",
"WEufOgiUGAet": 78,
"VGRAMMAR_DATA_ID_KEY_3618": 1
},
{
"kA3dEBjyp1Iw": "江苏省",
"WEufOgiUGAet": 74,
"VGRAMMAR_DATA_ID_KEY_3618": 2
},
{
"kA3dEBjyp1Iw": "海南省",
"WEufOgiUGAet": 74,
"VGRAMMAR_DATA_ID_KEY_3618": 3
},
{
"kA3dEBjyp1Iw": "河北省",
"WEufOgiUGAet": 64,
"VGRAMMAR_DATA_ID_KEY_3618": 4
}
]
}
],
"scales": [
{
"id": "yScale",
"type": "band",
"domain": {
"data": "chartData",
"field": "kA3dEBjyp1Iw"
},
"dependency": [
"viewBox"
],
"paddingInner": 0.2,
"round": true,
range: (scale, params) => {
return [params.viewBox.y1, params.viewBox.y2];
}
},
{
"id": "xScale",
"type": "linear",
"domain": {
"data": "chartData",
"field": "WEufOgiUGAet"
},
"dependency": [
"viewBox"
],
"nice": true,
"zero": true,
range: (scale, params) => {
return [params.viewBox.x1, params.viewBox.x2];
}
},
{
"id": "colorScale",
"type": "ordinal",
"domain": "kA3dEBjyp1Iw",
"range": [
"#6690F2",
"#70D6A3"
]
}
],
"marks": [
{
"type": "text",
"from": {
"data": "chartData"
},
"encode": {
"update": {
"text": "•",
"x": {
"scale": "xScale",
"value": 0
},
"y": {
"scale": "yScale",
"field": "kA3dEBjyp1Iw"
},
"size": 8,
"fill": "#006EFF",
"dx": -60,
"dy": 0,
"textBaseline": "middle"
}
},
"group": "root",
"id": "VGRAMMAR_MARK_2282"
},
{
"type": "text",
"from": {
"data": "chartData"
},
"encode": {
"update": {
"text": {
"field": "kA3dEBjyp1Iw"
},
"x": {
"scale": "xScale",
"value": 0
},
"y": {
"scale": "yScale",
"field": "kA3dEBjyp1Iw"
},
"textAlign": "left",
"textBaseline": "middle",
"dy": 0,
"dx": -50,
"color": "#fff",
"fontSize": 12,
"fontFamily": "D-DIN",
"fontWeight": "normal",
"fill": "#fff"
}
},
"group": "root",
"id": "VGRAMMAR_MARK_2283"
},
{
"type": "rect",
"from": {
"data": "chartData"
},
"encode": {
"update": {
"x": {
"scale": "xScale",
"field": "WEufOgiUGAet"
},
"x1": {
"scale": "xScale",
"value": 0
},
"y": {
"scale": "yScale",
"field": "kA3dEBjyp1Iw"
},
"height": 4,
"fill": {
"gradient": "linear",
"x0": 0,
"y0": 0,
"x1": 1,
"y1": 0,
"stops": [
{
"offset": 0,
"color": "rgba(0,110,255,1)"
},
{
"offset": 1,
"color": "rgba(0,229,229,1)"
}
]
},
"cornerRadius": 5
}
},
"animation": {
"enter": {
"type": "growWidthIn",
"duration": 2000
},
"state": {
"duration": 500
}
},
"dependency": [
"viewBox"
],
"group": "root",
"id": "VGRAMMAR_MARK_2284"
},
{
"type": "rect",
"from": {
"data": "chartData"
},
"dependency": [
"viewBox",
"xScale",
"yScale"
],
"encode": {},
"group": "root",
"id": "VGRAMMAR_MARK_2285"
},
{
"type": "symbol",
"from": {
"data": "chartData"
},
"encode": {
"update": {
"x": {
"scale": "xScale",
"field": "WEufOgiUGAet"
},
"y": {
"scale": "yScale",
"field": "kA3dEBjyp1Iw"
},
"dy": 2,
"visible": true,
"shape": "circle",
"size": 8,
"fill": "rgba(0,229,229,1)",
"stroke": null
}
},
"dependency": [
"viewBox"
],
"animation": {
"enter": {
"duration": 2000,
"type": "moveIn",
"options": {
"direction": "x"
}
},
"update": {
"type": "update",
"duration": 2000
},
"state": {
"duration": 500
}
},
"group": "root",
"id": "VGRAMMAR_MARK_2286"
},
{
"type": "symbol",
"from": {
"data": "chartData"
},
"encode": {
"update": {
"x": {
"scale": "xScale",
"field": "WEufOgiUGAet"
},
"y": {
"scale": "yScale",
"field": "kA3dEBjyp1Iw"
},
"visible": true,
"size": 12,
"fill": "rgba(255,255,255,0.2)",
"lineWidth": 2,
"stroke": {
"gradient": "radial",
"x0": 0.5,
"y0": 0,
"r0": 0,
"x1": 0.5,
"y1": 1,
"r1": 0.7,
"stops": [
{
"offset": 0,
"color": "rgba(255,255,255,0)",
"opacity": 0
},
{
"offset": 1,
"color": "rgba(255,255,255,0.8)"
}
]
},
"dy": 2
}
},
"animation": {
"enter": {
"type": "moveIn",
"duration": 2000,
"options": {
"direction": "x"
}
},
"update": {
"type": "update",
"duration": 2000
},
"state": {
"duration": 500
}
},
"group": "root",
"id": "VGRAMMAR_MARK_2287"
},
{
"type": "text",
"from": {
"data": "chartData"
},
"dependency": [
"viewBox",
"yScale"
],
"encode": {
update: (datum, elment, params) => {
return {
text: datum['WEufOgiUGAet'],
x: params.viewBox.x2,
y: params.yScale.scale(datum['kA3dEBjyp1Iw']),
textAlign: 'right',
textBaseline: 'middle',
fill: '#fff'
}
}
},
"group": "root",
"id": "VGRAMMAR_MARK_2288"
}
],
"animation": {
"enable": false
}
}

Current Behavior

bar mark is not in the right position

Expected Behavior

bar mark will in the right position

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response