如何将折线图与条形图对齐

时间:2014-07-14 18:14:35

标签: vega

我想将下图的行顶点(和项目符号)对齐到相应栏的中心:

{
  "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"
      }
    }
  ]
}

不幸的是,行标记不支持dx属性。我尝试过使用一个小组,但却无法让它发挥作用。

0 个答案:

没有答案