Question

我正在vega-lite中测试与折线图的交互，我希望在悬停时将特定的线涂成彩色，将其余的线变为灰色。 simple version可以正常工作。但是，如果我更改规格以向线段添加点，则悬停行为似乎并不会像对线段那样应用相同的方式。这是the specific example I tested。这是此示例的说明：

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

带有点的线与仅在vega-lite中的线相比，悬停时的着色线无法正常工作

1 个答案: