为某些数据点添加 Y 值作为折线图上的标签

Question

我有一个非常基本的折线图（参见下面的 Vega 编辑器的简化示例）。基本上就是画线，X轴是连续的日期，Y轴是一些数值。

我正在尝试为线上的一些数据点添加标签，该点的 Y 值。只针对部分数据点，因为有些图表可能超过一年，所以可能有数百天（X值）。

这是 Vega 自动在 X 轴上放置标签的方式。如果 X 值太多，则不会每天显示，例如“1 月 1 日”，然后是“1 月 8 日”，然后是“1 月 15 日”，等等（不错！）

仅供参考，使用 C3（D3 的图表库），我使用以下方法从每 7 个数据点中绘制一个标签：

data: {
  json: data.data,
  type: 'spline',
  labels: {
    format: function(v, id, i, j) {
      if ( i % 7 === 3 ) {
        return d3.format('.2f')(v);
      }
    }
    ...

不幸的是，我不知道从哪里开始。我没有找到任何此类示例，并且在文档中找不到任何相关内容。

仅供参考，以下是我想添加这些标签的示例图表：

{
    "$schema": "https://vega.github.io/schema/vega/v3.json",
    "width": 500,
    "height": 250,
    "autosize": {
        "type":   "fit",
        "resize": true
    },
    "data": [{
        "name": "table",
        "format": {
            "parse": {
                "date":  "date",
                "value": "number"
            }
        },
        "values": [
            { "date": "2017-09-01", "value": "12.34", "what": "one" },
            { "date": "2017-09-01", "value": "4.34",  "what": "two" },
            { "date": "2017-09-02", "value": "13.34", "what": "one" },
            { "date": "2017-09-02", "value": "13.34", "what": "two" },
            { "date": "2017-09-03", "value": "4.34",  "what": "one" },
            { "date": "2017-09-03", "value": "15.34", "what": "two" },
            { "date": "2017-09-04", "value": "15.34", "what": "one" },
            { "date": "2017-09-04", "value": "5.34",  "what": "two" },
            { "date": "2017-09-05", "value": "16.34", "what": "one" },
            { "date": "2017-09-05", "value": "6.34",  "what": "two" },
            { "date": "2017-09-06", "value": "17.34", "what": "one" },
            { "date": "2017-09-06", "value": "17.34", "what": "two" },
            { "date": "2017-09-07", "value": "18.34", "what": "one" },
            { "date": "2017-09-07", "value": "8.34",  "what": "two" },
            { "date": "2017-09-08", "value": "18.34", "what": "one" },
            { "date": "2017-09-08", "value": "14.34", "what": "two" },
            { "date": "2017-09-09", "value": "9.34",  "what": "one" },
            { "date": "2017-09-09", "value": "14.34", "what": "two" },
            { "date": "2017-09-10", "value": "20.34", "what": "one" },
            { "date": "2017-09-10", "value": "4.34",  "what": "two" }
        ]
    }],
    "scales": [{
        "name": "x",
        "type": "utc",
        "range": "width",
        "domain": {"data": "table", "field": "date"}
    }, {
        "name": "y",
        "type": "linear",
        "range": "height",
        "nice": true,
        "zero": true,
        "domain": {"data": "table", "field": "value"}
    }, {
        "name": "color",
        "type": "ordinal",
        "range": "category",
        "domain": {"data": "table", "field": "what"}
    }],
    "axes": [{
        "orient": "bottom",
        "scale": "x",
        "encode": {
            "labels": {
                "interactive": true,
                "update": {
                    "fill":     {"value": "steelblue"},
                    "angle":    {"value": 50},
                    "fontSize": {"value": 14},
                    "align":    {"value": "left"},
                    "baseline": {"value": "middle"},
                    "dx":       {"value": 3}
                },
                "hover": {
                    "fill": {"value": "firebrick"}
                }}}
    }, {
        "orient": "left",
        "scale": "y"
    }],
    "marks": [{
        "type": "group",
        "from": {
            "facet": {
                "name": "series",
                "data": "table",
                "groupby": "what"
            }
        },
        "marks": [{
            "type": "line",
            "from": {"data": "series"},
            "encode": {
                "enter": {
                    "x": {"scale": "x", "field": "date"},
                    "y": {"scale": "y", "field": "value"},
                    "stroke": {"scale": "color", "field": "what"},
                    "strokeWidth": {"value": 2}
                },
                "update": {
                    "interpolate": {"value": "monotone"},
                    "fillOpacity": {"value": 1}
                },
                "hover": {
                    "fillOpacity": {"value": 0.5}
                }
            }
        }]
    }]
}

Answer 1

Vega 有一个名为 tickCount 的属性，可以添加到您的坐标区定义中。将此添加到您的 y 轴必须解决您的问题：

{
    "orient": "left",
    "scale": "y",
    "tickCount": 4
}

如果信号应该是动态的，您也可以使用它。

该功能比图示更强大。请查看以下链接中的其他选项的文档： https://vega.github.io/vega/docs/axes/