How to align line chart with bar chart - vega

Question

I'd like to align the line vertices (and bullets) of the following chart to the center of the corresponding bars:
{
"data": [
{
"name": "table",
"transform": [
{
"type": "formula",
"field": "predicate0",
"expr": "d.data.x"
}
],
"values": [
{
"x": 1,
"series": 0,
"y": 9
},
{
"x": 1,
"series": 1,
"y": 9
},
{
"x": 3,
"series": 0,
"y": 7
},
{
"x": 3,
"series": 1,
"y": 7
},
{
"x": 5,
"series": 0,
"y": 1
},
{
"x": 5,
"series": 1,
"y": 3
},
{
"x": 2,
"series": 0,
"y": 9
},
{
"x": 2,
"series": 1,
"y": 9
},
{
"x": 4,
"series": 0,
"y": 2
},
{
"x": 4,
"series": 1,
"y": 3
}
]
}
],
"scales": [
{
"name": "x-axis",
"range": "width",
"type": "ordinal",
"padding": 0.2,
"domain": {
"data": "table",
"field": "predicate0"
}
},
{
"name": "y-axis",
"round": true,
"nice": true,
"range": "height",
"domain": {
"data": "table",
"field": "data.y"
}
},
{
"name": "color",
"type": "ordinal",
"domain": [
0,
1
],
"range": [
"#4682b4",
"#8a8f99"
]
},
{
"name": "shortLabels",
"type": "ordinal",
"domain": {
"data": "table",
"field": "data.x"
}
}
],
"axes": [
{
"properties": {
"axis": {
"stroke": {
"value": "#55606e"
}
},
"labels": {
"fill": {
"value": "#55606e"
},
"font": {
"value": "Open Sans"
},
"fontSize": {
"value": 12
}
},
"ticks": {
"stroke": {
"value": "#55606e"
}
},
"title": {
"fill": {
"value": "#55606e"
},
"font": {
"value": "Open Sans"
},
"fontSize": {
"value": 14
},
"fontWeight": {
"value": "normal"
}
}
},
"scale": "x-axis",
"tickPadding": 8,
"tickSize": 0,
"title": "Series",
"type": "x"
},
{
"grid": "true",
"layer": "back",
"scale": "y-axis",
"ticks": 5,
"title": "Count",
"type": "y",
"properties": {
"grid": {
"strokeDash": {
"value": [
2,
2
]
}
},
"ticks": {
"stroke": {
"scale": "color",
"value": 0
}
},
"axis": {
"stroke": {
"scale": "color",
"value": 0
}
},
"title": {
"font": {
"value": "Open Sans"
},
"fontSize": {
"value": 14
},
"fontWeight": {
"value": "normal"
},
"fill": {
"scale": "color",
"value": 0
}
},
"labels": {
"font": {
"value": "Open Sans"
},
"fontSize": {
"value": 12
},
"fill": {
"scale": "color",
"value": 0
}
}
}
}
],
"marks": [
{
"type": "rect",
"properties": {
"enter": {
"x": {
"scale": "x-axis",
"field": "predicate0"
},
"width": {
"scale": "x-axis",
"band": true
},
"y": {
"scale": "y-axis",
"field": "data.y"
},
"y2": {
"scale": "y-axis",
"value": 0
},
"fill": {
"scale": "color",
"field": "data.series"
}
}
},
"from": {
"transform": [
{
"type": "filter",
"test": "d.data.series === 0"
}
],
"data": "table"
}
},
{
"type": "line",
"properties": {
"enter": {
"x": {
"scale": "x-axis",
"field": "data.x"
},
"y": {
"scale": "y-axis",
"field": "data.y"
},
"stroke": {
"scale": "color",
"field": "data.series"
},
"strokeWidth": {
"value": 2
}
}
},
"from": {
"transform": [
{
"type": "filter",
"test": "d.data.series === 1"
}
],
"data": "table"
}
},
{
"type": "symbol",
"properties": {
"update": {
"fill": {
"scale": "color",
"field": "data.series"
}
},
"enter": {
"strokeWidth": {
"value": 3
},
"fill": {
"scale": "color",
"field": "data.series"
},
"x": {
"scale": "x-axis",
"field": "data.x"
},
"y": {
"scale": "y-axis",
"field": "data.y"
}
}
},
"from": {
"transform": [
{
"type": "filter",
"test": "d.data.series === 1"
}
],
"data": "table"
}
}
]
}
Unfortunately, the line marks doesn't support the dx property. I tried using a group but wasn't able to get it to work.