根据 positive/negative x 轴值渲染不同的 fill/stroke 颜色

Question

我正在尝试编写一个小图表用于 risk/opportunity 分析。您输入 4 个值：

PreConsequence & PostConsequence（整数范围 -4 到 +4）
PreLikelihood & PostLikelihood（整数范围为 0 到 4）

它用图表可视化那些图表如下：

阴影填充呈现 Pre 值，而描边呈现 Post 值。左象限中的几何图形代表风险，应为红色，而右象限中的几何图形代表机会，应为绿色。

我正在努力寻找如何检查负后果值并相应地分配颜色。我想它会在我下面代码的最后两行中完成：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 500,
  "height": 250,

  "data": [
    {
      "name": "table",
      "values": [
        {"C": -4,  "L": 0, "f":"Pre"}, {"C": 0,  "L": 4, "f":"Pre"}, 
        {"C": 0,  "L": 2, "f":"Post"}, {"C": -1,  "L": 0, "f":"Post"}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "range": "width",
      "nice": true,
      "zero": true,
      "domain": {"data": "table", "field": "C"},
      "domainMax": 4,
      "domainMin": -4
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "domain": {"data": "table", "field": "L"},
      "domainMax": 4,
      "domainMin": 0
    },
    {
      "name": "color",
      "type": "ordinal",
      "range":"ordinal",
      "domain": {"data": "table", "field": "f"}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "xscale", "tickCount": 10 },
    {"orient": "left", "scale": "yscale", "tickCount": 5, "offset": -250 }
  ],

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table",
          "groupby": "f"
        }
      },
    "marks": [
    {
      "type": "area",
      "from": {"data": "series"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "C" },
          "y": {"scale": "yscale", "field": "L"},
          "y2": {"scale": "yscale", "value": 0 }, 
          "fillOpacity": [{ "test": "indata('series', 'f', 'Pre')", "value": 0.3 }, {"value": 0}],
          "strokeWidth": [{ "test": "indata('series', 'f', 'Pre')", "value": 0 }, {"value": 2}],
          "fill": [{ "test": "indata('series', 'f', 'Pre')", "value": "red" }, {"value": "red"}],
          "stroke": [{ "test": "indata('series', 'f', 'Pre')", "value": "red" }, {"value": "red"}]
        }        
      }
    }
  ]
    }
  ]
}

谁能给我一些关于如何测试数据值并相应地设置填充和描边颜色的指示？

谢谢

Answer 1

Vega 信号可用于根据数据值有条件地绘制颜色。

在给定的 vega 规范中，如果数据也具有正象限 C 值，像这样更改 fill 属性应该会达到您的预期。

          "fill": { "signal": "datum.C > 0 ? 'green': 'red'"},

根据 positive/negative x 轴值渲染不同的 fill/stroke 颜色

Render different fill/stroke colours depending on positive/negative x-axis value

data-visualization

vega