Question

将条带添加为新层时（在2层图表中），停止工作：没有可视化，并且“ WARN无法在编码通道” y“上投影选择，其中没有字段“ 。

只有两行时，下面的两个图层定义工作正常。

vglSpec.push(['#vis2a',{
    $schema: vglVers,
    data: {"url":"MyDataset1"},
    // old "encoding": { x: {"field": "instant", "type": "temporal"} }
    width:680,
    layer: [
        {
            "mark": {"stroke": "#68C", "type": "line", "point": true},
            "encoding": { x: {"field": "instant", "type": "temporal"}, "y": {
                "field": "n_count", 
                "type": "quantitative"
            }},
            "selection": {"grid": {"type":"interval", "bind":"scales"}}   //zoom
        },
        {
            "mark": {"stroke": "red", "type": "line", "strokeOpacity": 0.4},
            "encoding": { x: {"field": "instant", "type": "temporal"}, "y": {
                "field": "instant_totmin", 
                "type": "quantitative"
            }}
        },
        {
            "mark": "rule",
            "data": {"url":"MyDataset2"}, // little subset of instant of Dataset1
            "encoding": {
              "x": { "field": "instant", "type": "temporal"},
              "color": {"value": "yellow"},
              "size": {"value": 5}
            },
            //resolve:? x is same axis and the only visualization field
        }
    ],
    resolve: {"scale": {"y": "independent"}}
}]);

PS：仅删除名称和标题，所有真实脚本。

使用伪数据进行仿真：工作正常！

请单击rule guide的第三个示例...并将其替换或改编为该VEGA-lite脚本：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/movies.json"},
  "layer": [
    { 
      "mark": "bar",
      "encoding": {
        "x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
        "y": {"aggregate": "count", "type": "quantitative"}
      }
    },
    {
      "mark": "rule",
      "data": {"values": [{"IMDB_Rating":3.5},{"IMDB_Rating":7.8}]},
      "encoding": {
        "x": { "field": "IMDB_Rating","type": "quantitative" },
        "color": {"value": "yellow"},
        "size": {"value": 4}
      }
    }
  ]
}

Answer 1

您使用的是独立的y比例尺，没有y编码的规则标记的y比例尺定义不明确。解决此问题的最佳方法可能是将规则标记与其他图层之一组合在一起，以便可以使用y比例尺：

vglSpec.push(['#vis2a',{
    $schema: vglVers,
    data: {"url":"MyDataset1"},
    // old "encoding": { x: {"field": "instant", "type": "temporal"} }
    width:680,
    layer: [
        {
            "mark": {"stroke": "#68C", "type": "line", "point": true},
            "encoding": { x: {"field": "instant", "type": "temporal"}, "y": {
                "field": "n_count", 
                "type": "quantitative"
            }},
            "selection": {"grid": {"type":"interval", "bind":"scales"}}   //zoom
        },
        {
          layer: [
            {
                "mark": {"stroke": "red", "type": "line", "strokeOpacity": 0.4},
                "encoding": { x: {"field": "instant", "type": "temporal"}, "y": {
                    "field": "instant_totmin", 
                    "type": "quantitative"
                }}
            },
            {
                "mark": "rule",
                "data": {"url":"MyDataset2"}, // little subset of instant of Dataset1
                "encoding": {
                  "x": { "field": "instant", "type": "temporal"},
                  "color": {"value": "yellow"},
                  "size": {"value": 5}
                },
            //resolve:? x is same axis and the only visualization field
            }
          ]
        }
    ],
    resolve: {"scale": {"y": "independent"}}
}]);

（请注意，我实际上没有尝试过此解决方案，因为您没有在问题中包含数据，但是该方法应该可以使用。）

如何将垂直规则添加为新图层和相同的x轴？

使用伪数据进行仿真：工作正常！

1 个答案: