如何為vegalite中y軸上顯示的最大值設定miximum-有解無憂

我想為折線圖上顯示的最大值設定最小值。例如，它應該始終在 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/[email protected]/build/vega.min.js"></script>
  <script src="https://unpkg.com/[email protected]/build/vega-lite.min.js"></script>
  <script src="https://unpkg.com/[email protected]/build/vega-lite-api.min.js"></script>
  <script src="https://unpkg.com/[email protected]/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/[email protected]/build/vega.min.js"></script>
  <script src="https://unpkg.com/[email protected]/build/vega-lite.min.js"></script>
  <script src="https://unpkg.com/[email protected]/build/vega-lite-api.min.js"></script>
  <script src="https://unpkg.com/[email protected]/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

uj5u.com熱心網友回復：

只需自己計算域，而不是依賴自動規模。如果data只是值陣列，那么

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

計算域。如果你想擴展這個[minValue, maxValue]做

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而不是內置的Array.reduce.

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/444179.html

標籤：javascript d3.js 素食主义者织女星 vega 嵌入

上一篇：ApacheHTTPClientSSL如何接受所??有用于測驗目的的證書

下一篇：D3.js-調整文本大小以適合任何多邊形