不同图表的Vega Lite‘和Filtering’

Question

我希望有人能帮我解决织女星的问题。

在我的仪表板示例中：

• 第一个图表是一段时间内的每日采购金额总和。
• 第二个图表是按采购类型分列的累计采购金额。
• 第三个图表是前一个采购商集团的总采购金额。

下面是静态的仪表板：

​

​

如果我点击下面两个图表中的一个条形图，上面的图表将反映这种过滤。见下文

​

​

问题发生了，我想同时从“购买类型”和“购买行为”中选择一个组。例如，如果我选择“以前的购买者是”和“购买类型是”，这显示为或过滤在顶部的图表，我希望这显示为和过滤。

下面是可以直接在vega (https://vega.github.io/editor/#/)中运行的代码。

谢谢。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"date": "2020-10-01","purchase_amount": 30,
        "purchase_type": "cash","previous_purchaser": "no"},
      {"date": "2020-10-01","purchase_amount": 60,
        "purchase_type": "cash","previous_purchaser": "yes"},
      {"date": "2020-10-01","purchase_amount": 40,
        "purchase_type": "credit","previous_purchaser": "yes"},
      {"date": "2020-10-01","purchase_amount": 40,
        "purchase_type": "credit","previous_purchaser": "no"},
      {"date": "2020-10-02","purchase_amount": 60,
        "purchase_type": "cash","previous_purchaser": "no"},
      {"date": "2020-10-02","purchase_amount": 90,
        "purchase_type": "cash","previous_purchaser": "yes"},
      {"date": "2020-10-02","purchase_amount": 110,
        "purchase_type": "credit","previous_purchaser": "yes"},
      {"date": "2020-10-02","purchase_amount": 80,
        "purchase_type": "credit","previous_purchaser": "no"},
      {"date": "2020-10-03","purchase_amount": 80,
        "purchase_type": "cash","previous_purchaser": "no"},
      {"date": "2020-10-03","purchase_amount": 60,
        "purchase_type": "cash","previous_purchaser": "yes"},
      {"date": "2020-10-03","purchase_amount": 100,
        "purchase_type": "credit","previous_purchaser": "yes"},
      {"date": "2020-10-03","purchase_amount": 100,
        "purchase_type": "credit","previous_purchaser": "yes"}]},
  "vconcat": [
    {
      "width": 350,
      "height": 80,
      "transform": [{"filter": {"selection": "click"}}],
      "mark": {"type": "bar"},
      "encoding": {
        "x": {"field": "date"},
        "y": {"aggregate": "sum", "field": "purchase_amount"}
      },
      "selection": {"brush": {"encodings": ["x"], "type": "interval"}}
    },
    {
      "vconcat": [
        {
          "width": 325,
          "transform": [
            {"filter": {"selection": "brush"}},
            {"calculate": "datum.purchase_amount", "as": "purchase_amt"}
          ],
          "mark": {"type": "bar"},
          "encoding": {
            "x": {"field": "purchase_amt", "aggregate": "sum"},
            "y": {"field": "purchase_type", "title": "Purchase Type"},
            "color": {
              "condition": {
                "selection": "click",
                "field": "purchase_type",
                "legend": null
              },
              "value": "lightgrey"
            }
          },
          "selection": {"click": {"encodings": ["color"], "type": "multi"}}
        },
        {
          "width": 325,
          "transform": [
            {"filter": {"selection": "brush"}},
            {"calculate": "datum.purchase_amount", "as": "purchase_amt"}
          ],
          "mark": {"type": "bar"},
          "encoding": {
            "x": {"field": "purchase_amt", "aggregate": "sum"},
            "y": {
              "field": "previous_purchaser",
              "type": "nominal",
              "title": "Previous Purchaser"
            },
            "color": {
              "condition": {
                "selection": "click",
                "field": "previous_purchaser"
              },
              "value": "lightgrey"
            }
          },
          "selection": {"click": {"encodings": ["color"], "type": "multi"}}
        }
      ]
    }
  ]
}

Answer 1

为此，可以对每个图表使用不同的click选择，并将它们与"and"筛选器语句组合起来，如下所示：

{"filter": {"and": [{"selection": "click1"}, {"selection": "click2"}]}}

所有这些看起来都是这样的(开放编辑器)：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {
        "date": "2020-10-01",
        "purchase_amount": 30,
        "purchase_type": "cash",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-01",
        "purchase_amount": 60,
        "purchase_type": "cash",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-01",
        "purchase_amount": 40,
        "purchase_type": "credit",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-01",
        "purchase_amount": 40,
        "purchase_type": "credit",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-02",
        "purchase_amount": 60,
        "purchase_type": "cash",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-02",
        "purchase_amount": 90,
        "purchase_type": "cash",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-02",
        "purchase_amount": 110,
        "purchase_type": "credit",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-02",
        "purchase_amount": 80,
        "purchase_type": "credit",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-03",
        "purchase_amount": 80,
        "purchase_type": "cash",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-03",
        "purchase_amount": 60,
        "purchase_type": "cash",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-03",
        "purchase_amount": 100,
        "purchase_type": "credit",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-03",
        "purchase_amount": 100,
        "purchase_type": "credit",
        "previous_purchaser": "yes"
      }
    ]
  },
  "vconcat": [
    {
      "width": 350,
      "height": 80,
      "transform": [
        {"filter": {"and": [{"selection": "click1"}, {"selection": "click2"}]}}
      ],
      "mark": {"type": "bar"},
      "encoding": {
        "x": {"field": "date"},
        "y": {"aggregate": "sum", "field": "purchase_amount"}
      },
      "selection": {"brush": {"encodings": ["x"], "type": "interval"}}
    },
    {
      "vconcat": [
        {
          "width": 325,
          "transform": [
            {"filter": {"selection": "brush"}},
            {"calculate": "datum.purchase_amount", "as": "purchase_amt"}
          ],
          "mark": {"type": "bar"},
          "encoding": {
            "x": {"field": "purchase_amt", "aggregate": "sum"},
            "y": {"field": "purchase_type", "title": "Purchase Type"},
            "color": {
              "condition": {
                "selection": "click1",
                "field": "purchase_type",
                "legend": null
              },
              "value": "lightgrey"
            }
          },
          "selection": {"click1": {"encodings": ["color"], "type": "multi"}}
        },
        {
          "width": 325,
          "transform": [
            {"filter": {"selection": "brush"}},
            {"calculate": "datum.purchase_amount", "as": "purchase_amt"}
          ],
          "mark": {"type": "bar"},
          "encoding": {
            "x": {"field": "purchase_amt", "aggregate": "sum"},
            "y": {
              "field": "previous_purchaser",
              "type": "nominal",
              "title": "Previous Purchaser"
            },
            "color": {
              "condition": {
                "selection": "click2",
                "field": "previous_purchaser"
              },
              "value": "lightgrey"
            }
          },
          "selection": {"click2": {"encodings": ["color"], "type": "multi"}}
        }
      ]
    }
  ]
}

​

​