如何更改平行坐标 Vega 图中笔划的颜色？

Question

我正在使用织女星图（平行坐标）。如何更改 scheme colors（w.r.t 'name' 字段）的线条颜色。

这是我的code

我尝试用色标改变笔触 属性 但对线条笔触没有影响。 谁能指出我做错了什么。 我正在使用 Vega 版本 4

谢谢

维基

Answer 1

因为颜色需要按列 "name"，所以将输入数据集转换为具有重复的名称行。换句话说，输入数据集必须是 3 列（名称、季度、值）

然后，更改 "group" 类型标记以使用按列分组的分面数据集 "name"

  "name": "marks_group_lines",
  "type": "group",
  "from": {
    "facet": {
      "name": "cars_by_name",
      "data": "cars",
      "groupby": "name"
    }
  },

使用 cars_by_name 作为数据集来呈现 "line" 类型标记。

提示：不是为每个季度定义 4 个轴的四分之一数据集和这些轴的比例尺，而是可以使用具有 "x" 属性 点比例尺的 "line" 类型标记。

完整代码供参考：

     {
      "$schema": "https://vega.github.io/schema/vega/v4.json",
      "width": 700,
      "height": 400,
      "padding": 5,
      "config": {
        "axisY": {
          "titleX": -2,
          "titleY": 410,
          "titleAngle": 0,
          "titleAlign": "right",
          "titleBaseline": "top"
        }
      },
      "data": [
        {
          "name": "cars",
          "values": [
            {
              "name": "A",
              "quarter": "Q1",
              "value": 51
            },
            {
              "name": "A",
              "quarter": "Q2",
              "value": 47
            },
            {
              "name": "A",
              "quarter": "Q3",
              "value": 45
            },
            {
              "name": "A",
              "quarter": "Q4",
              "value": 30
            },
            {
              "name": "B",
              "quarter": "Q1",
              "value": 42
            },
            {
              "name": "B",
              "quarter": "Q2",
              "value": 57
            },
            {
              "name": "B",
              "quarter": "Q3",
              "value": 72
            },
            {
              "name": "B",
              "quarter": "Q4",
              "value": 41
            },
            {
              "name": "C",
              "quarter": "Q1",
              "value": 25
            },
            {
              "name": "C",
              "quarter": "Q2",
              "value": 37
            },
            {
              "name": "C",
              "quarter": "Q3",
              "value": 60
            },
            {
              "name": "C",
              "quarter": "Q4",
              "value": 25
            },
            {
              "name": "D",
              "quarter": "Q1",
              "value": 22
            },
            {
              "name": "D",
              "quarter": "Q2",
              "value": 25
            },
            {
              "name": "D",
              "quarter": "Q3",
              "value": 51
            },
            {
              "name": "D",
              "quarter": "Q4",
              "value": 42
            }
          ]
        },
        {
          "name": "fields",
          "values": [
            "Q1",
            "Q2",
            "Q3",
            "Q4"
          ]
        }
      ],
      "scales": [
        {
          "name": "name_to_xaxis",
          "type": "point",
          "domain": {
            "data": "cars",
            "field": "quarter"
          },
          "range": "width"
        },
        {
          "name": "values_to_height",
          "type": "linear",
          "domain": {
            "data": "cars",
            "field": "value"
          },
          "range": "height"
        },
        {
          "name": "quarter_to_color",
          "type": "ordinal",
          "domain": {
            "data": "cars",
            "field": "name"
          },
          "range": "category"
        },
        {
          "name": "ord",
          "type": "point",
          "range": "width",
          "round": true,
          "domain": {
            "data": "fields",
            "field": "data"
          }
        },
        {
          "name": "Q1",
          "type": "linear",
          "range": "height",
          "zero": false,
          "nice": true,
          "domain": {
            "data": "cars",
            "field": "Q1"
          }
        },
        {
          "name": "Q2",
          "type": "linear",
          "range": "height",
          "zero": false,
          "nice": true,
          "domain": {
            "data": "cars",
            "field": "Q2"
          }
        },
        {
          "name": "Q3",
          "type": "linear",
          "range": "height",
          "zero": false,
          "nice": true,
          "domain": {
            "data": "cars",
            "field": "Q3"
          }
        },
        {
          "name": "Q4",
          "type": "linear",
          "range": "height",
          "zero": false,
          "nice": true,
          "domain": {
            "data": "cars",
            "field": "Q4"
          }
        }
      ],
      "axes": [
        {
          "orient": "left",
          "zindex": 1,
          "scale": "Q1",
          "title": "Q1",
          "ticks": false,
          "labels": false,
          "offset": {
            "scale": "ord",
            "value": "Q1",
            "mult": -1
          }
        },
        {
          "orient": "left",
          "zindex": 1,
          "scale": "Q2",
          "title": "Q2",
          "ticks": false,
          "labels": false,
          "offset": {
            "scale": "ord",
            "value": "Q2",
            "mult": -1
          }
        },
        {
          "orient": "left",
          "zindex": 1,
          "scale": "Q3",
          "title": "Q3",
          "ticks": false,
          "labels": false,
          "offset": {
            "scale": "ord",
            "value": "Q3",
            "mult": -1
          }
        },
        {
          "orient": "left",
          "zindex": 1,
          "scale": "Q4",
          "title": "Q4",
          "ticks": false,
          "labels": false,
          "offset": {
            "scale": "ord",
            "value": "Q4",
            "mult": -1
          }
        }
      ],
      "marks": [
        {
          "name": "marks_group_lines",
          "type": "group",
          "from": {
            "facet": {
              "name": "cars_by_name",
              "data": "cars",
              "groupby": "name"
            }
          },
          "marks": [
            {
              "name": "marks_lines",
              "type": "line",
              "from": {
                "data": "cars_by_name"
              },
              "encode": {
                "update": {
                  "x": {
                    "scale": "name_to_xaxis",
                    "field": "quarter"
                  },
                  "y": {
                    "scale": "values_to_height",
                    "field": "value"
                  },
                  "stroke": {
                    "scale": "quarter_to_color",
                    "field": "name"
                  },
                  "strokeOpacity": {
                    "value": 1
                  }
                },
                "hover": {
                  "stroke": {
                    "value": "#7c7c7c"
                  },
                  "strokeOpacity": {
                    "value": 1
                  },
                  "zindex": 99
                }
              }
            },
            {
              "name": "marks_symbols",
              "type": "symbol",
              "from": {
                "data": "cars_by_name"
              },
              "encode": {
                "enter": {
                  "stroke": {
                    "value": "#6D6D6D"
                  },
                  "strokeWidth": {
                    "value": 1
                  },
                  "shape": {
                    "value": "circle"
                  }
                },
                "update": {
                  "x": {
                    "scale": "name_to_xaxis",
                    "field": "quarter"
                  },
                  "y": {
                    "scale": "values_to_height",
                    "field": "value"
                  },
                  "fill": {
                    "scale": "quarter_to_color",
                    "field": "name"
                  },
                  "size": {
                    "value": 50
                  },
                  "stroke": {
                    "value": "#77AE80"
                  }
                },
                "hover": {
                  "fill": {
                    "value": "#AFD098"
                  }
                }
              }
            }
          ]
        }
      ]
    }