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

Question

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

这是我的code

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

谢谢

vikky

Answer 1

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

然后，更改“组”类型标记以使用按“名称”列分组的构面数据集

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

使用 cars_by_name 作为数据集来呈现“线”型标记。

提示：可以为每个qarter定义4个轴的四分之一数据集并为这些轴定标，而可以使用具有“ x”属性的点标度的“线”型标记。

完整代码供参考：

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