Окрашивание линий при наведении не работает одинаково для линий с точками по сравнению со строками только в vega-lite

Question

Я тестирую взаимодействие с линейными диаграммами в vega-lite, где я хочу, чтобы при наведении курсора линия была окрашена, а остальные линии были серыми. A простая версия работает отлично. Однако, если я изменю спецификацию, чтобы добавить точки к линиям, поведение при наведении курсора не будет применяться к точкам так же, как к линиям. Вот конкретный пример, который я тестировал . Вот спецификация из этого примера:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "data/stocks.csv"},
  "selection": {"pts": {"type": "single", "on": "mouseover"}},
  "mark": {
    "type": "line",
    "point": {
      "filled": true
    }
  },
  "encoding": {
    "x": {"timeUnit": "year", "field": "date", "type": "temporal"},
    "y": {"aggregate":"mean", "field": "price", "type": "quantitative"},
    "color": {
      "condition": {
        "selection": "pts",
        "field":"symbol",
        "type": "nominal"
      },
      "value": "grey"
    }
  }
}

Я ожидал, что при наведении курсора на точку или отрезок линии все сегменты и точки выбранной линии должны быть окрашены, а все остальные линии и их точки должны быть серыми. Я вижу, что при наведении курсора на точки отображается только всплывающая подсказка, но на самом деле цвета не меняются. При наведении курсора на линию цвет линии, но ее точки все еще становятся серыми. Кроме того, сразу после наведения на точку, если я пытаюсь навести курсор на отрезок соответствующей линии, ничего не происходит.

Answer 1

Если вы добавите "encodings": ["color"] к определению выбора, оно будет применяться ко всем кодировкам цвета.Попробуйте здесь: ( Vega Editor )

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {
    "url": "data/stocks.csv"
  },
  "selection": {
    "pts": {
      "type": "single",
      "on": "mouseover",
      "encodings": ["color"]
    }
  },
  "mark": {
    "type": "line",
    "point": {
      "filled": true
    }
  },
  "encoding": {
    "x": {
      "timeUnit": "year",
      "field": "date",
      "type": "temporal"
    },
    "y": {
      "aggregate": "mean",
      "field": "price",
      "type": "quantitative"
    },
    "color": {
      "condition": {
        "selection": "pts",
        "field": "symbol",
        "type": "nominal"
      },
      "value": "grey"
    }
  }
}