欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

?? 本文首發自 前端修羅場(點擊加入)，是一個由 資深開發者 獨立運行 的專業技術社區，我專注 Web 技術、答疑解惑、面試輔導以及職業發展。現在加入，私聊我即可獲取一次免費的模擬面試機會coreldraw12出現末能創建dom文件，幫你評估知識點的掌握程度，獲得更全面的學習指導意見，交個朋友，少走彎路，少吃虧！

在過去的兩年里，我們看到很多數據可視化基于新冠疫情開展研究工作。 這些可視化圖表通過為我們提供有關特定城市/地區病例數的信息，幫助人們更快捷地理解疫情的發展情況。

除此之外，數據可視化也在幫助我們更好地理解數字。 因為視覺本身不是執行復雜的計算，而是幫助人腦更快地感知信息。 此外，與充滿數字的電子表格相比，它們看起來也更有趣。

在本文中，我們將使用 D3.js 和 Vue.js 創建折線圖，并勾畫一個疫情趨勢。

D3.js

D3 是一個開源 庫，用于在 Web 瀏覽器中創建交互式數據可視化。 D3 可用于操作 DOM 對象和 HTML、SVG 或 元素以可視化數據。

目前， D3 在 上擁有超過 102k star。

根據官方文檔所介紹的：

D3 幫助用戶使用 HTML、SVG 和 CSS 將數據變為現實。 D3 對 Web 標準的重視為用戶提供了現代瀏覽器的全部功能，而無需將自己束縛于專有框架，結合了強大的可視化組件和數據驅動的 DOM 操作方法。

除了作為創建視覺效果的強大工具外，D3 還擁有龐大的開源社區。 這也是它如此受歡迎的原因之一。廢話不多說，下面我們進入到實戰正題。

開始

我們首先在終端中運行以下命令來創建一個新的 Vue 應用程序：

npm init vue@2.7.4

接下來，導航到項目根目錄并安裝必要的依賴項：

cd vue-project
npm install

接著安裝 D3：

npm i d3

使用 D3.js 構建折線圖

前面我們了解了 D3 是什么，現在讓我們通過創建折線圖來學習如何使用它。

首先要做的是定義我們將在其中呈現圖表的 HTML 模板。 本文中，我們將使用 SVG 呈現圖表：

<template>
  <div>
    <h2>Vue.js and D3 Line Charth2>
    <svg>svg>
  div>
template>

接下來，我們定義要在圖表上顯示的數據。 我們將在此示例中使用虛擬數據，但在實際應用程序中，我們很可能會使用實時數據：

<script>
  const data = [
    { date: "2022-07-01", amount: 29 },
    { date: "2022-07-02", amount: 56 },
    { date: "2022-07-03", amount: 43 },
    { date: "2022-07-04", amount: 32 },
    { date: "2022-07-05", amount: 66 },
    { date: "2022-07-06", amount: 61 },

    { date: "2022-07-07", amount: 55 },
    { date: "2022-07-08", amount: 31 },
    { date: "2022-07-09", amount: 22 },
    { date: "2022-07-10", amount: 26 },
    { date: "2022-07-11", amount: 21 },
    { date: "2022-07-12", amount: 12 },
    { date: "2022-07-13", amount: 10 },
  ];
<script/>

創建圖表

接著，開始創建圖表。

<script>
  import * as d3 from 'd3'
  data = [//前面定義的數據]
  mounted(){
    const width = 800;
    const height = 500;
    const svg = d3.select("svg").attr("width", width).attr("height", height);
    const g = svg.append("g");
  }
<script/>

在上面的代碼中，我們從 D3 庫中導入了 d3 并定義了圖表的寬度和高度。 然后，我們使用 d3.() 方法選擇了我們之前定義的 SVG 元素，并將其存儲為一個名為 svg 的常量。 此方法將選擇 DOM 中匹配的第一個元素。

接下來coreldraw12出現末能創建dom文件，我們使用 D3 的 attr() 方法將寬度和高度屬性添加到 svg，然后將 g（SVG 元素）附加到 svg。 SVG 元素是用于對其他 SVG 元素進行分組的容器。

目前，我們數據數組中的日期是字符串格式。因此，我們的下一步是將字符串數據中的日期解析為 日期對象。

D3 有一個 d3-time- 模塊，其中包含幾種解析和格式化日期的方法：

const parseTime = d3.timeParse("%d-%b-%y");

創建圖表軸

我們想在 x 軸上繪制日期，在 y 軸上繪制數量。

D3 有一個 d3-scale 模塊，我們將使用它來將數據值轉換為像素。

d3-scale 需要兩條信息：域和范圍。 簡單來說，域就是我們給的輸入，范圍就是我們想要的輸出：

const x = d3
      .scaleTime()
      .domain(

        d3.extent(data, function (d) {
          return parseTime(d.date);
        })
      )
      .rangeRound([0, width]);
const y = d3
      .scaleLinear()
      .domain(
        d3.extent(data, function (d) {
          return d.amount;
        })
      )
      .rangeRound([height, 0]);

在這里，我們執行以下操作：

我們在 x 軸上使用了 d3.() 刻度，因為我們正在處理日期對象，這是知道如何處理日期對象的刻度。 然后，我們在 y 軸上使用了 d3.() 刻度，因為 y 軸上的值是線性增加的數字。

創建折線

D3 提供了一個 d3-shape 模塊，我們可以使用它來創建復雜的形狀，例如符號、線條和圓弧。 我們正在創建一個折線圖，因此我們將使用 d3.line() 方法。

d3.line() 方法創建一個遵循一系列點的形狀：

const line = d3.line()
  .x(function (d) {
    return x(parseTime(d.date));
  })
  .y(function (d) {
    return y(d.amount);
  });

在這里，我們通過傳入匿名函數并返回日期對象和每個日期對應的數量來定義行的 x 軸和 y 軸屬性。

將軸附加到圖表

現在，我們需要將 x 和 y 軸附加到圖表上，如下所示：

g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
    g.append("g")
      .call(d3.axisLeft(y))
      .append("text")

      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("病例數");

對于 x 軸，我們調用 d3.() 因為我們需要將它對齊到畫布的底部。 對于 y 軸，我們調用 d3.() 因為我們想將它對齊到畫布的左側。

將路徑附加到圖表

最后，我們將路徑附加到圖表。 這個路徑實際上會根據數據的值繪制折線圖：

g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", line);

在這里，我們執行以下操作：

有了這個，我們看到折線圖出現在瀏覽器中。

完整代碼

這是折線圖的最終代碼：

<template>
  <div>
    <h2>Vue.js and D3 Line Charth2>
    <svg>svg>
  div>
template>
<script>
import * as d3 from "d3";
export default {
  data() {
    return {};
  },
  mounted() {
    const width = 800;
    const height = 500;
    const data = [

    { date: "2022-07-01", amount: 29 },
    { date: "2022-07-02", amount: 56 },
    { date: "2022-07-03", amount: 43 },
    { date: "2022-07-04", amount: 32 },
    { date: "2022-07-05", amount: 66 },
    { date: "2022-07-06", amount: 61 },
    { date: "2022-07-07", amount: 55 },
    { date: "2022-07-08", amount: 31 },
    { date: "2022-07-09", amount: 22 },
    { date: "2022-07-10", amount: 26 },
    { date: "2022-07-11", amount: 21 },
    { date: "2022-07-12", amount: 12 },
    { date: "2022-07-13", amount: 10 },
  ];
    const svg = d3.select("svg").attr("width", width).attr("height", height);
    const g = svg.append("g");
    // 解析日期
    const parseTime = d3.timeParse("%d-%b-%y");
    // 創建圖表軸
    const x = d3
      .scaleTime()
      .domain(
        d3.extent(data, function (d) {
          return parseTime(d.date);
        })
      )
      .rangeRound([0, width]);
    const y = d3
      .scaleLinear()
      .domain(
        d3.extent(data, function (d) {
          return d.amount;
        })
      )

      .rangeRound([height, 0]);
    // 創建折線
    const line = d3
      .line()
      .x(function (d) {
        return x(parseTime(d.date));
      })
      .y(function (d) {
        return y(d.amount);
      });
    // 將軸附加到圖表上
    g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
    g.append("g")
      .call(d3.axisLeft(y))
      .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      text("病例數");
    // 將路徑附加到圖表上
    g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", line);
  },
};
script>

結尾

D3 是一個龐大的庫，盡管我們涵蓋了很多內容，但這只是基礎知識。 我們可以使用 D3 創建不同類型的圖表。希望這一個入門能幫助到你！