在Vue項目裡面使用d3.js

来源:https://www.cnblogs.com/wuvkcyan/archive/2018/04/30/8975105.html
-Advertisement-
Play Games

之前寫一個 Demo裡面 有些東西要使用d3實現一些效果 但是在很多論壇找資源都找不到可以在Vue裡面使用D3.js的方法,npm 上面的D3相對來說 可以說是很不人性化了 完全沒有說 在webpack上怎麼使用D3.js 最後折騰很久 看到某位外國大佬 看他的案例 成功的實現了在Vue項目裡面實現 ...


之前寫一個 Demo裡面 有些東西要使用d3實現一些效果 但是在很多論壇找資源都找不到可以在Vue裡面使用D3.js的方法,npm 上面的D3相對來說 可以說是很不人性化了 完全沒有說 在webpack上怎麼使用D3.js

最後折騰很久 看到某位外國大佬 看他的案例 成功的實現了在Vue項目裡面實現D3的使用

首先安裝

npm install d3 --save-dev

以防萬一,然後看package.json

安裝完成

在我們開始之前,讓我們渲染一個Vue組件,它使用常規的D3 DOM操作呈現一個簡單的折線圖:


<script>
import * as d3 from 'd3';
const data = [99, 71, 78, 25, 36, 92];
export default {
  name: 'non-vue-line-chart',
  template: '<div></div>',
  mounted() {
    const svg = d3.select(this.$el)
      .append('svg')
      .attr('width', 500)
      .attr('height', 270)
      .append('g')
      .attr('transform', 'translate(0, 10)');
    const x = d3.scaleLinear().range([0, 430]);
    const y = d3.scaleLinear().range([210, 0]);
    d3.axisLeft().scale(x);
    d3.axisTop().scale(y);
    x.domain(d3.extent(data, (d, i) => i));
    y.domain([0, d3.max(data, d => d)]);
    const createPath = d3.line()
      .x((d, i) => x(i))
      .y(d => y(d));
    svg.append('path').attr('d', createPath(data));
  },
};
</script>
<style lang="sass">
svg
  margin: 25px;
  path
    fill: none
    stroke: #76BF8A
    stroke-width: 3px
</style>

代碼簡單易懂,但這僅僅是一個基本的例子。因為我們沒有使用模板,所以需要更多操作和計算的更複雜的可視化會掩蓋組件的設計和邏輯。上述方法的另一個警告是,我們不能使用scopedCSS 的屬性,因為D3會動態地向DOM添加元素。

可以使用比較奇怪,但是代碼比較優雅的方式去實現

<template>
  <svg width="500" height="270">
    <g style="transform: translate(0, 10px)">
      <path :d="line" />
    </g>
  </svg>
</template>
<script>
import * as d3 from 'd3';
export default {
  name: 'vue-line-chart',
  data() {
    return {
      data: [99, 71, 78, 25, 36, 92],
      line: '',
    };
  },
  mounted() {
    this.calculatePath();
  },
  methods: {
    getScales() {
      const x = d3.scaleTime().range([0, 430]);
      const y = d3.scaleLinear().range([210, 0]);
      d3.axisLeft().scale(x);
      d3.axisBottom().scale(y);
      x.domain(d3.extent(this.data, (d, i) => i));
      y.domain([0, d3.max(this.data, d => d)]);
      return { x, y };
    },
    calculatePath() {
      const scale = this.getScales();
      const path = d3.line()
        .x((d, i) => scale.x(i))
        .y(d => scale.y(d));
      this.line = path(this.data);
    },
  },
};
</script>
<style lang="sass" scoped>
svg
  margin: 25px;
path
  fill: none
  stroke: #76BF8A
  stroke-width: 3px
</style>

非常酷,即使它沒有公開任何屬性並且數據是硬編碼的,它很好地將視圖從邏輯中分離出來,並且使用Vue鉤子,方法和data對象,現象和上圖一樣的


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 首先在https://hub.docker.com查找mariadb官方鏡像,相關參數設置https://hub.docker.com/_/mariadb/有詳細說明 [client] default-character-set=utf8 [mysql] default-character-set= ...
  • 安裝MongoDB之前,首先要下載MongoDB軟體安裝包, MongoDB社區版官網下載地址:https://www.mongodb.com/download-center?jmp=nav#community 下載後,雙擊msi安裝文件進行安裝,點擊"Next">> 勾選同意相關協議規定,點擊"N ...
  • 在介紹這個參數前,我們先聊聊參數log_warnings。我們知道MySQL中,其中log_error是定義是否啟用錯誤日誌的功能和錯誤日誌的存儲位置,log_warnings是定義是否將告警信息(warning messages)也寫入錯誤日誌。此選項預設啟用,具體來說: log_warnings... ...
  • 在這一篇文章中,我們主要來介紹多線程抓取數據。 多線程是以併發的方式執行的,在這裡要註意,Python的多線程程式只能運行在一個單核上以併發的方式運行,即便是多核的機器,所以說,使用多線程抓取可以極大地提高抓取效率 下麵我們以requests為例介紹多線程抓取,然後在通過與單線程程式比較,體會多線程 ...
  • 最近需要在項目中使用熱修複框架,在這裡以美團的Robust為主寫一篇文章總結一下學習的過程。 一直認為要學習一個框架的原理,首先需要讓他跑起來,從效果反推回去,這樣更容易理解。 一、美團Robust的使用 首先我們在編寫代碼前需要做如下準備 配置文件讀寫許可權,6.0以上需要手動獲取 在project ...
  • 一、TypeScript的聲明文件就像C/C++用.h文件。當使用TypeScript調用其他已經編寫好的類庫時,可以提供IntelliSense智能提示。 二、使用npm指令來獲取.d.ts文件 運行後在type/jquery目錄下生成4個文件:index.d.ts,lincense,packag ...
  • 本文內容: 精靈圖 字體圖標 首發日期:2018-05-01 精靈圖: 在以前,每個圖片資源都是獨立的一張張圖片,瀏覽器訪問網站中的不同網頁時是重覆獲取這一張張圖片的,這代表需要訪問很多次資源。 為了減少資源的訪問次數,將多個常用的圖片集合到一張圖片中(網頁的緩存機制是會略去本地已經有的資源,如果前... ...
  • 本文內容: 表格邊框合併 兄弟標簽外邊距合併 父子標簽的外邊距合併 首發日期:2018-05-01 表格邊框合併: 發生情況: 當設置了cellpadding="0" cellspacing="0"後,表格的相鄰邊框會合併,使得邊框變粗了。 解決方案: 在table標簽中設置border-colla ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...