如何在 vega lite 中为 y 轴上显示的最大值设置 miximum

Question

我想为折线图上显示的最大值设置最小值。例如，它应该始终在 y 轴上显示从 0 到 100 的值，如下所示：

我通过以下方式实现了这一目标：

vl.y().fieldQ('d').scale({"domain":[0,2]}),

如下例所示（请在下面的运行示例中查看折线图的呈现方式。）：

<!DOCTYPE html>
<html>

<head>
  <!--
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> -->
  <script src="https://unpkg.com/vega@5.21.0/build/vega.min.js"></script>
  <script src="https://unpkg.com/vega-lite@5.2.0/build/vega-lite.min.js"></script>
  <script src="https://unpkg.com/vega-lite-api@5.0.0/build/vega-lite-api.min.js"></script>
  <script src="https://unpkg.com/vega-embed@6.20.8/build/vega-embed.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js">
  </script>
</head>

<body>
  <div id="viz"></div>
  <script type="text/javascript">
    const data = [
      {
        "data_name": "data1",
        "d": 0.1,
        "e": 0.7
      },
      {
        "data_name": "data2",
        "d": 0.2,
        "e": 0.3
      },
      {
        "data_name": "data3",
        "d": 0.3,
        "e": 0.4
      },
      {
        "data_name": "data4",
        "d": 0.25,
        "e": 0.2
      },
      {
        "data_name": "data5",
        "d": 0.4,
        "e": 0.15
      },
      {
        "data_name": "data6",
        "d": 0.6,
        "e": 0.2
      },
      {
        "data_name": "data7",
        "d": 0.15,
        "e": 0.5
      },
      {
        "data_name": "data8",
        "d": 0.7,
        "e": 0.13
      },
      {
        "data_name": "data9",
        "d": 0.56,
        "e": 0.22
      },
      {
        "data_name": "data10",
        "d": 0.35,
        "e": 0.2
      },
      {
        "data_name": "data11",
        "d": 0.01,
        "e": 0.89
      },
      {
        "data_name": "data12",
        "d": 0.57,
        "e": 0.24
      },
      {
        "data_name": "data13",
        "d": 0.87,
        "e": 0.23
      },
      {
        "data_name": "data14",
        "d": 0.5,
        "e": 0.44
      },
      {
        "data_name": "data15",
        "d": 0.76,
        "e": 0.53
      },
      {
        "data_name": "data16",
        "d": 0.1,
        "e": 0.72
      },
      {
        "data_name": "data17",
        "d": 0.88,
        "e": 0.63
      },
      {
        "data_name": "data18",
        "d": 0.55,
        "e": 0.72
      },
      {
        "data_name": "data19",
        "d": 0.97,
        "e": 0.16
      },
      {
        "data_name": "data20",
        "d": 0.28,
        "e": 0.18
      },
      {
        "data_name": "data21",
        "d": 0.56,
        "e": 0.96
      },
      {
        "data_name": "data22",
        "d": 0.92,
        "e": 0
      },
      {
        "data_name": "data23",
        "d": 0.91,
        "e": 0.41
      },
      {
        "data_name": "data24",
        "d": 0.24,
        "e": 0.59
      },
      {
        "data_name": "data25",
        "d": 0.01,
        "e": 0.29
      },
      {
        "data_name": "data26",
        "d": 0.12,
        "e": 0.41
      },
      {
        "data_name": "data27",
        "d": 0.49,
        "e": 0.66
      },
      {
        "data_name": "data28",
        "d": 0.54,
        "e": 0.81
      },
      {
        "data_name": "data29",
        "d": 0.61,
        "e": 0.51
      },
      {
        "data_name": "data30",
        "d": 0.32,
        "e": 0.88
      },
      {
        "data_name": "data31",
        "d": 0.32,
        "e": 0.51
      },
      {
        "data_name": "data32",
        "d": 0.38,
        "e": 0.67
      },
      {
        "data_name": "data33",
        "d": 0.27,
        "e": 0.52
      },
      {
        "data_name": "data34",
        "d": 0.92,
        "e": 0.43
      },
      {
        "data_name": "data35",
        "d": 0.82,
        "e": 0.03
      },
      {
        "data_name": "data36",
        "d": 0,
        "e": 0.29
      },
      {
        "data_name": "data37",
        "d": 0.5,
        "e": 0.91
      },
      {
        "data_name": "data38",
        "d": 0.67,
        "e": 0.6
      },
      {
        "data_name": "data39",
        "d": 0.51,
        "e": 0.62
      },
      {
        "data_name": "data40",
        "d": 0.43,
        "e": 0.96
      },
      {
        "data_name": "data41",
        "d": 0.86,
        "e": 0.72
      },
      {
        "data_name": "data42",
        "d": 0.05,
        "e": 0.55
      },
      {
        "data_name": "data43",
        "d": 0.19,
        "e": 0.62
      },
      {
        "data_name": "data44",
        "d": 0.96,
        "e": 0.06
      },
      {
        "data_name": "data45",
        "d": 0.84,
        "e": 0.2
      },
      {
        "data_name": "data46",
        "d": 0.92,
        "e": 0.33
      },
      {
        "data_name": "data47",
        "d": 0.19,
        "e": 0.86
      },
      {
        "data_name": "data48",
        "d": 0.44,
        "e": 0.01
      },
      {
        "data_name": "data49",
        "d": 0.82,
        "e": 0.54
      },
      {
        "data_name": "data50",
        "d": 0.64,
        "e": 0.07
      },
      {
        "data_name": "data51",
        "d": 0.44,
        "e": 0.3
      },
      {
        "data_name": "data52",
        "d": 0.09,
        "e": 0.99
      },
      {
        "data_name": "data53",
        "d": 0.54,
        "e": 0.52
      },
      {
        "data_name": "data54",
        "d": 0.82,
        "e": 0.26
      },
      {
        "data_name": "data55",
        "d": 0.64,
        "e": 0.67
      },
      {
        "data_name": "data56",
        "d": 0.06,
        "e": 0.22
      },
      {
        "data_name": "data57",
        "d": 0.58,
        "e": 0.8
      },
      {
        "data_name": "data58",
        "d": 0,
        "e": 0.07
      },
      {
        "data_name": "data59",
        "d": 0.43,
        "e": 0.77
      },
      {
        "data_name": "data60",
        "d": 0.38,
        "e": 0.42
      }
    ];

    function createChart(video_data) 
    {
        const mpg = vl.markLine().data(video_data).encode(
            vl.x()
                .fieldN('data_name')
                .title('datas')
                .sort('-y'),
            vl.y().fieldQ('d').scale({"domain":[0,2]}),

            vl.tooltip(['data_name', 'd', 'e'])
        ).width(500);

        const plot = vl.hconcat(
            vl.layer(mpg, mpg.markCircle())
        )

        return plot.toObject();
    };

    function showStats()
    {
        const spec = this.createChart(data);
        // console.log(spec);
        const opt = {
            renderer: "canvas",
            actions: false
        };
        vegaEmbed("#viz", spec, opt);
    };

    showStats();

  </script>
</body>

</html>

当某些数据点的值大于 2 时出现问题（它在 y 轴之外呈现。请在下面的运行示例中查看折线图的呈现方式）：

c<!DOCTYPE html>
<html>

<head>
  <!--
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> -->
  <script src="https://unpkg.com/vega@5.21.0/build/vega.min.js"></script>
  <script src="https://unpkg.com/vega-lite@5.2.0/build/vega-lite.min.js"></script>
  <script src="https://unpkg.com/vega-lite-api@5.0.0/build/vega-lite-api.min.js"></script>
  <script src="https://unpkg.com/vega-embed@6.20.8/build/vega-embed.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js">
  </script>
</head>

<body>
  <div id="viz"></div>
  <script type="text/javascript">
    const data = [
      {
        "data_name": "data1",
        "d": 0.1,
        "e": 0.7
      },
      {
        "data_name": "data2",
        "d": 0.2,
        "e": 0.3
      },
      {
        "data_name": "data3",
        "d": 0.3,
        "e": 0.4
      },
      {
        "data_name": "data4",
        "d": 0.25,
        "e": 0.2
      },
      {
        "data_name": "data5",
        "d": 0.4,
        "e": 0.15
      },
      {
        "data_name": "data6",
        "d": 0.6,
        "e": 0.2
      },
      {
        "data_name": "data7",
        "d": 0.15,
        "e": 0.5
      },
      {
        "data_name": "data8",
        "d": 0.7,
        "e": 0.13
      },
      {
        "data_name": "data9",
        "d": 0.56,
        "e": 0.22
      },
      {
        "data_name": "data10",
        "d": 0.35,
        "e": 0.2
      },
      {
        "data_name": "data11",
        "d": 0.01,
        "e": 0.89
      },
      {
        "data_name": "data12",
        "d": 0.57,
        "e": 0.24
      },
      {
        "data_name": "data13",
        "d": 0.87,
        "e": 0.23
      },
      {
        "data_name": "data14",
        "d": 0.5,
        "e": 0.44
      },
      {
        "data_name": "data15",
        "d": 0.76,
        "e": 0.53
      },
      {
        "data_name": "data16",
        "d": 0.1,
        "e": 0.72
      },
      {
        "data_name": "data17",
        "d": 0.88,
        "e": 0.63
      },
      {
        "data_name": "data18",
        "d": 0.55,
        "e": 0.72
      },
      {
        "data_name": "data19",
        "d": 0.97,
        "e": 0.16
      },
      {
        "data_name": "data20",
        "d": 0.28,
        "e": 0.18
      },
      {
        "data_name": "data21",
        "d": 0.56,
        "e": 0.96
      },
      {
        "data_name": "data22",
        "d": 0.92,
        "e": 0
      },
      {
        "data_name": "data23",
        "d": 0.91,
        "e": 0.41
      },
      {
        "data_name": "data24",
        "d": 0.24,
        "e": 0.59
      },
      {
        "data_name": "data25",
        "d": 0.01,
        "e": 0.29
      },
      {
        "data_name": "data26",
        "d": 0.12,
        "e": 0.41
      },
      {
        "data_name": "data27",
        "d": 0.49,
        "e": 0.66
      },
      {
        "data_name": "data28",
        "d": 0.54,
        "e": 0.81
      },
      {
        "data_name": "data29",
        "d": 0.61,
        "e": 0.51
      },
      {
        "data_name": "data30",
        "d": 0.32,
        "e": 0.88
      },
      {
        "data_name": "data31",
        "d": 0.32,
        "e": 0.51
      },
      {
        "data_name": "data32",
        "d": 0.38,
        "e": 0.67
      },
      {
        "data_name": "data33",
        "d": 0.27,
        "e": 0.52
      },
      {
        "data_name": "data34",
        "d": 0.92,
        "e": 0.43
      },
      {
        "data_name": "data35",
        "d": 0.82,
        "e": 0.03
      },
      {
        "data_name": "data36",
        "d": 0,
        "e": 0.29
      },
      {
        "data_name": "data37",
        "d": 0.5,
        "e": 0.91
      },
      {
        "data_name": "data38",
        "d": 0.67,
        "e": 0.6
      },
      {
        "data_name": "data39",
        "d": 0.51,
        "e": 0.62
      },
      {
        "data_name": "data40",
        "d": 0.43,
        "e": 0.96
      },
      {
        "data_name": "data41",
        "d": 0.86,
        "e": 0.72
      },
      {
        "data_name": "data42",
        "d": 0.05,
        "e": 0.55
      },
      {
        "data_name": "data43",
        "d": 0.19,
        "e": 0.62
      },
      {
        "data_name": "data44",
        "d": 0.96,
        "e": 0.06
      },
      {
        "data_name": "data45",
        "d": 0.84,
        "e": 0.2
      },
      {
        "data_name": "data46",
        "d": 0.92,
        "e": 0.33
      },
      {
        "data_name": "data47",
        "d": 0.19,
        "e": 0.86
      },
      {
        "data_name": "data48",
        "d": 0.44,
        "e": 0.01
      },
      {
        "data_name": "data49",
        "d": 0.82,
        "e": 0.54
      },
      {
        "data_name": "data50",
        "d": 0.64,
        "e": 0.07
      },
      {
        "data_name": "data51",
        "d": 0.44,
        "e": 0.3
      },
      {
        "data_name": "data52",
        "d": 0.09,
        "e": 0.99
      },
      {
        "data_name": "data53",
        "d": 0.54,
        "e": 0.52
      },
      {
        "data_name": "data54",
        "d": 0.82,
        "e": 0.26
      },
      {
        "data_name": "data55",
        "d": 0.64,
        "e": 0.67
      },
      {
        "data_name": "data56",
        "d": 0.06,
        "e": 0.22
      },
      {
        "data_name": "data57",
        "d": 0.58,
        "e": 0.8
      },
      {
        "data_name": "data58",
        "d": 0,
        "e": 0.07
      },
      {
        "data_name": "data59",
        "d": 0.43,
        "e": 0.77
      },
      {
        "data_name": "data60",
        "d": 3.38,
        "e": 0.42
      }
    ];

    function createChart(video_data) 
    {
        const mpg = vl.markLine().data(video_data).encode(
            vl.x()
                .fieldN('data_name')
                .title('datas')
                .sort('-y'),
            vl.y().fieldQ('d').scale({"domain":[0,2]}),

            vl.tooltip(['data_name', 'd', 'e'])
        ).width(500);

        const plot = vl.hconcat(
            vl.layer(mpg, mpg.markCircle())
        )

        return plot.toObject();
    };

    function showStats()
    {
        const spec = this.createChart(data);
        // console.log(spec);
        const opt = {
            renderer: "canvas",
            actions: false
        };
        vegaEmbed("#viz", spec, opt);
    };

    showStats();

  </script>
</body>

</html>

我怎样才能让 vega lite 在数据点超出范围时扩展 y 轴（将“0 到 2”扩展到“0 到 3.38”），但总是显示一些固定范围（即第一个图表显示范围“0 到 2”，即使数据中的最大值为 1）。

参考：

https://vega.github.io/vega-lite/docs/scale.html

Answer 1

不用依赖自动秤，自己计算域就行了。如果 data 只是值数组，则

data.reduce((domain, d) => ([
  Math.min(domain[0], d),
  Math.max(domain[1], d)
]), [data[0], data[0]])

计算域。如果你想将它扩展到 [minValue, maxValue] do

data.reduce((domain, d) => ([
  Math.min(domain[0], d, minValue),
  Math.max(domain[1], d, maxValue)
]), [data[0], data[0]])

如果 d3 已经在您的依赖项列表中，为了方便，您可以使用 d3.min、d3.max、d3.extent 之一，而不是内置的 [=18] =].

如何在 vega lite 中为 y 轴上显示的最大值设置 miximum

How to set miximum for max value displayed on y-axis in vega lite

javascript

d3.js

vega

vega-lite

vega-embed