D3 v4.x入門(1-4)——帶動畫的餅狀圖
依舊是簡單粗暴的餅圖原始碼(帶動畫)
<template> <div id='svgContainer' style=""> <div class="every"> <h3>餅圖探究</h3> <div class="svg" id="pie"></div> </div> </div> </template> <script> import * as d3 from 'd3' export default { data () { return { pieData: [{ name: '小米', value: 60.8 }, { name: '華為', value: 20.8 }, { name: '聯想', value: 30.4 }, { name: '三星', value: 40.8 }, { name: '蘋果', value: 90.8 }, { name: '其他', value: 100.8 } ] } }, methods: { pie () { let _this = this let width = 400 let height = 400 document.getElementById('pie').innerHTML = '' let svg = d3.select('#pie') .append('svg') .attr('width', width + 'px') .attr('height', height + 'px') let pie = d3.pie() .value((d) => d.value) // 資料轉化 let pieData = pie(_this.pieData) let outerRadius = width / 2.8 let innerRadius = 0 // 建立弧生成器 let arc = d3.arc() .innerRadius(outerRadius) .outerRadius(innerRadius) let color = d3.interpolateCool let arcs = svg.selectAll('g') .data(pieData) .enter() .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')') arcs.append('path') .attr('fill', function (d, i) { return color(i) }) .attr('d', function (d, i) { return arc(d) }) // 設定動畫,還未看懂這部分內容的引數部分 .transition() .duration(4000) .attrTween('d', function (d, i) { let fn = d3.interpolateObject({ endAngle: d.startAngle }, d) return function (i) { return arc(fn(i)) } }) // 新增文字value arcs.append('text') .attr('transform', function (d) { let x = arc.centroid(d)[0] * 1.4 let y = arc.centroid(d)[1] * 1.4 return 'translate(' + x + ',' + y + ')' }) .attr('text-anchor', 'middle') .attr('font-size', '14') .text(function (d) { return d.value }) // 新增文字name arcs.append('text') .attr('transform', function (d) { let x = arc.centroid(d)[0] * 2.5 let y = arc.centroid(d)[1] * 2.5 return 'translate(' + x + ',' + y + ')' }) .attr('text-anchor', 'middle') .attr('font-size', '14') .text(function (d) { return d.data.name }) // 新增直線 arcs.append('line') .attr('stroke', 'black') .attr('stroke-width', '2px') .attr('x1', function (d) { return arc.centroid(d)[0] * 2 }) .attr('y1', function (d) { return arc.centroid(d)[1] * 2 }) .attr('x2', function (d) { return arc.centroid(d)[0] * 2.3 }) .attr('y2', function (d) { return arc.centroid(d)[1] * 2.3 }) } }, mounted () { this.pie() } } </script> <style lang="less"> #svgContainer{ width: 100%; height: 100%; .every{ width: 400px; height: 425px; margin:15px; float: left; h3{ margin:0; .button{ float: right; margin-right: 20px; font-size: 14px; cursor: pointer; padding: 2px 8px; border:1px solid #ccc; background: yellowgreen; border-radius: 4px; &:hover{ background: violet; } } } .svg{ width: 400px; height: 400px; } } } </style>
相關推薦
D3 v4.x入門(1-4)——帶動畫的餅狀圖
依舊是簡單粗暴的餅圖原始碼(帶動畫) <template> <div id='svgContainer' style=""> <div class="every"> <h3>餅圖探究</h3&
D3 v4.x入門(1-7)—— 樹狀圖探究
樹狀圖,一般用於樹形結構資料展示(廢話呢麼),下面原始碼實現上圖效果 <template> <div id='svgContainer' style=""> <div class="every"> <h3
D3 v4.x入門(1-終章)—— 地圖探究
為保長城不倒 烈馬長槍握好 眼看時間不早 對的起江東父老 路上苦頭不少 為求長生不老 你看我巍巍河山 中華屹立不倒! 本系列第一階段最後一章,給大家推薦一個D3領域的大佬 為了防止大家找不到地圖json檔案的資源,下面是地圖資源的傳送門 <templa
Jetty入門(1-4)
html 配置文件 關註 hive 簽名證書 自動加載 spa 查詢參數 應用 使用Gradle來進行Java Web應用開發項目管理,可以十分便利地解決包依賴等問題。 war插件的出現,讓項目部署成為一個復制粘貼的過程,那有沒有辦法讓Java web應用的部署,就像win
SLAM從入門到放棄:SLAM十四講第十章習題(1-4)
以下均為簡單筆記,如有錯誤,請多多指教。 證明式 K =
SLAM從入門到放棄:SLAM十四講第四章習題(1-4)
以下均為簡單筆記,如有錯誤,請多多指教。 驗證SO(3)SO(3)SO(3)、SE(3)SE(3)SE(3)和Sim(3)Sim(3)Sim(3)關於乘法成群。 證: 已知SO(3)={R∈R3×3
Jetty入門(1-2)配置Jetty - 獨立運行模式
https monitored log www rtu mon 方式 新版本 demo 本文詳述如何安裝和配置Jetty服務器,主要講述Jetty的獨立運行模式(Standalone)。隨後介紹它的配置選項,以及模塊化的架構。 Jetty有獨立運行模式、嵌入運行模式和J
apigw鑒權分析(1-4)新浪微博開放平臺 - 鑒權分析
取消 spa 控制 server 信息 des 包含 flash poi 一、訪問入口 http://open.weibo.com/wiki/%E6%8E%88%E6%9D%83%E6%9C%BA%E5%88%B6%E8%AF%B4%E6%98%8E 微博開放接口的
spring-oauth-server入門(1-9)CLIENT_模式下 authorities的產生
image ring .cn server -o ges images com cnblogs spring-oauth-server入門(1-9)CLIENT_模式下 authorities的產生
巨集觀經濟學(1-4)
國民經濟核算 交易不改變 GDP,除非收手續費 儲蓄減投資等於預算赤字減貿易赤字 二手貨的出售不計入當期 GDP,因為在其生產的時候已計入 GDP,當期只是資產的轉移而非收入增加。當期變質存貨的不計入,但以後銷售的計入。 NNP = GNP - 折舊 PCE(個人消費支出)平
Java程式設計入門(1.3):Java虛擬機器
機器語言由非常簡單的指令組成,計算機的CPU可以直接執行這些指令。幾乎所有的程式都是用Java、Fortran或C++這樣的高階語言編寫的。由高階語言編寫的程式不能被任何計算機直接執行。首先,必須將其翻譯成機器語言。這種翻譯由一種稱為編譯器的程式完成,編譯器將高階語言翻譯成
前端非同步程式設計系列之何為非同步程式設計(1/4)
1.什麼是同步和非同步 同步,也就是你在執行程式碼時,他會等待程式碼返回結果,不管這程式碼執行多久,只有程式碼返回結果瞭然後再程式碼才會繼續往下執行。而非同步指的是:我要執行一段程式碼A,我不等待他出結果,我會為他設定一個處理程式碼,當A出結果時,直接去呼叫那個處理程式碼去處理他,而我本身就不會
學習Linux-4.12核心網路協議棧(1.4)——協議棧的初始化(proto_init)
這篇文章主要分析proto_init過程,它完成協議相關proc檔案的建立 3241 static __net_initdata struct pernet_operations proto_net_ops = { 3242 .init = proto_init
吳恩達DeepLearning.ai筆記(1-4)-- 深層神經網路
神經網路和深度學習—深層神經網路1.深度網路中的前向傳播2. 核對矩陣的維度DNN結構示意圖如圖所示:對於第L層神經網路,單個樣本其各個引數的矩陣維度為:W[l]:(n[l],n[l−1])b[l]:(n[l],1)dW[l]:(n[l],n[l−1])db[l]:(n[l]
吳恩達Coursera深度學習課程 DeepLearning.ai 提煉筆記(1-4)-- 深層神經網路
以下為在Coursera上吳恩達老師的DeepLearning.ai課程專案中,第一部分《神經網路和深度學習》第四周課程“深層神經網路”部分關鍵點的筆記。筆記並不包含全部小視訊課程的記錄,如需學習筆記中捨棄的內容請至 Coursera 或者 網易雲課
pandas教程-----DataFrame入門(12/4)
pandas是python環境下最有名的資料統計包,而DataFrame翻譯為資料框,是一種資料組織方式,這麼說你可能無法從感性上認識它,舉個例子,你大概用過Excel,而它也是一種資料組織和呈現的方式,簡單說就是表格,而在在pandas中用DataFrame組織資料,如
第二章(1.4)Python基礎知識(流程控制)
Python流程控制 一、條件判斷語句 基本形式(注意不要少寫了冒號:) if <條件判斷1>: <執行1> elif <條件判斷2>: <執行2> elif <條件判斷3>
玩具:加減法驗證碼(1+?=4)
遇到個小需求要寫一個驗證碼功能,就是加減法,囧,感覺挺好玩的就順手寫了。程式碼簡單的囧……純屬自娛自樂,湊數,Orz~~ 生成圖片的部分沒寫,邏輯都差不多。主要注意:干擾線,噪點,變形,背景色就OK。我用的現成的程式碼,就不發了。 /** * 加減法驗證碼
vue.js入門(3-4)(methods,屬性繫結)
//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <scri
第六章(1.4)自然語言處理實戰——時間語義抽取
一、簡介 本工具是由復旦NLP中的時間分析功能修改而來,做了一些細節和功能的優化,經SpringBoot封裝成web工具。 泛指時間的支援,如:早上、晚上、中午、傍晚等。 時間未來傾向。 如:在週五輸入“週一早上開會”,則識別到下週一早上的時間;在下午