Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js + D3.jsでグラフを描く
Search
Tatsuya Miyado
May 23, 2018
Technology
1
2.3k
Vue.js + D3.jsでグラフを描く
Vue.js Tokyo v-meetup #7 LTスライド
Tatsuya Miyado
May 23, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
9
2.8k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
220
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
510
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
580
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
210
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
380
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
3
610
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
170
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
200
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
260
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
220
サンドボックス技術でAI利活用を促進する
koh_naga
0
190
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
9.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Visualization
eitanlees
148
16k
Facilitating Awesome Meetings
lara
55
6.5k
Faster Mobile Websites
deanohume
309
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Unsuck your backbone
ammeep
671
58k
Transcript
7VFKT %KTͰ άϥϑΛඳ͘ 7VFKT5PLZPWNFFUVQ !IPHFTVLF@
!IPHFTVLF@
7VFKTͰάϥϑΛ ඳ͖͍ͨ
%KTΛ͍͍ͨ
7VFKT %KTͬͯ Ͱ͖Δͷʁ
ͬͯΈ·ͨ͠
%&.0 IUUQHSBQIIPHFTVLFOFU
·ͣ7VFΛΘͣʹॻ͍ͯΈΔ const dataset = [ 10, 20, 5, 3, 8,
40, 20, 35]; const w = 200, h = 100, margin = 5; const svg = d3.select(‘.graph').append('svg') .attr('width', w + margin).attr('height', h + margin); const xScale = d3.scaleLinear().domain([0, dataset.length]).range([margin, w - margin]); const yScale = d3.scaleLinear().domain([d3.min(dataset), d3.max(dataset)]).range([h - margin, margin]); const xAxis = d3.axisBottom(xScale); svg.append('g') .attr('transform', `translate(0, ${h})`) .call(xAxis); const yAxis = d3.axisLeft(yScale); svg.append('g') .attr('transform', `translate(${margin}, 0)`) .call(yAxis); const d3line = d3.line() .x((d, i) => xScale(i)) .y(d => yScale(d)) .curve(d3.curveLinear); svg.append('path') .attr(‘d', d3line(dataset)) .style('stroke-width', 2) .style('stroke', 'steelblue') .style('fill', 'none');
͜ΕΛ7VF ίϯϙʔωϯτʹམͱ͠ࠐΉ
const dataset = [ 10, 20, 5, 3, 8, 40,
20, 35]; const w = 200, h = 100, margin = 5; const svg = d3.select(‘.graph').append('svg') .attr('width', w + margin).attr('height', h + margin); const xScale = d3.scaleLinear().domain([0, dataset.length]).range([margin, w - margin]); const yScale = d3.scaleLinear().domain([d3.min(dataset), d3.max(dataset)]).range([h - margin, margin]); const xAxis = d3.axisBottom(xScale); svg.append('g') .attr('transform', `translate(0, ${h})`) .call(xAxis); const yAxis = d3.axisLeft(yScale); svg.append('g') .attr('transform', `translate(${margin}, 0)`) .call(yAxis); const d3line = d3.line() .x((d, i) => xScale(i)) .y(d => yScale(d)) .curve(d3.curveLinear); svg.append('path') .attr(‘d', d3line(dataset)) .style('stroke-width', 2) .style('stroke', 'steelblue') .style('fill', 'none'); 9:࣠ͷඳը QBUIͷඳը 47(ཁૉͷੜ ೖྗσʔλΛඳըྖҬʹ Ϛοϐϯά͢Δؔͷੜ ݩͷίʔυ
:࣠ 9࣠ ύε ίϯϙʔωϯτׂ άϥϑશମ
<template> <path :d="d" /> </template> 5FNQMBUF 1BUI computed: { line
() { return d3.line() .x(d => this.xScale(d.x)) .y(d => this.yScale(d.y)) .curve(d3.curveLinear); }, d () { return this.line(this.data); }, }, 4DSJQU 47(ͷཁૉΛ ςϯϓϨʔτʹॻ͘ ύεͷ࠲ඪͱͳΔ EଐੑͷΛੜ
<template> <path :d="d" /> </template> 5FNQMBUF 1BUI computed: { line
() { return d3.line() .x(d => this.xScale(d.x)) .y(d => this.yScale(d.y)) .curve(d3.curveLinear); }, d () { return this.line(this.data); }, }, 4DSJQU ͱΛͲͷΑ͏ͳۂઢͰ ิؒ͢Δ͔ͷࢦఆ
computed: { xAxis () { return d3.axisBottom(this.xScale) .tickSizeInner(10) // ઢͷ͞ʢଆʣ
.tickSizeOuter(15) // ઢͷ͞ʢ֎ଆʣ .tickPadding(10) // ઢͱςΩετͷؒͷڑ .ticks(4); // ઢͷ }, }, mounted () { d3.select(this.$el).call(this.xAxis); }, 9:࣠ <template> <g :transform="`translate(${position.x}, ${position.y})`" /> </template> 5FNQMBUF 4DSJQU ࣠ΓΛ Hཁૉʹ ඳը͢Δ
computed: { xAxis () { return d3.axisBottom(this.xScale) .tickSizeInner(10) // ઢͷ͞ʢଆʣ
.tickSizeOuter(15) // ઢͷ͞ʢ֎ଆʣ .tickPadding(10) // ઢͱςΩετͷؒͷڑ .ticks(4); // ઢͷ }, }, mounted () { d3.select(this.$el).call(this.xAxis); }, ͜͜ 9:࣠ <template> <g :transform="`translate(${position.x}, ${position.y})`" /> </template> 5FNQMBUF 4DSJQU ࣠ͷΓʹ ؔ͢ΔઃఆΛߦ͏
Ξχϝʔγϣϯ w $44USBOTJUJPOͰQBUIΛΞχϝʔγϣϯͰ͖Δʁ w $ISPNFҎ֎Ͱ Ͱ͖ͳ͍ w ผͷखஈ͕ඞཁ
Ξχϝʔγϣϯ w 5XFFO-JUFKTΛ͏ w ͋ΔΛࢦఆͷඵͰɺࢦఆͷ·ͰঃʑʹมԽͤ͞Δ ػೳΛ࣋ͭ const hoge = {
a: 0 }; TweenLite.to(hoge, 3, { a: 100 }); AIPHFBAͷΛඵ͔͚ͯ·ͰมԽͤ͞Δ
Ξχϝʔγϣϯ w 5XFFO-JUFKTΛQBUIͷEଐੑʹ༻͍Δ͜ͱͰΞχϝʔγϣ ϯՄೳ <path d=“M55,120.20408163265304L66.22448979591837,245.71428571428572L77.44897959183673"></path> <path d="M55,239.59183673469386L66.22448979591837,22.244897959183675L77.44897959183673"></path> ࢀߟঢ়ଶͷτϥϯδγϣϯ7VFKTIUUQTKQWVFKTPSHWHVJEFUSBOTJUJPOJOHTUBUFIUNM
άϥϑͷඳը͕Ͱ͖ͨ
%&.0ͷίʔυ IUUQTHJUIVCDPNIPHFTVLFWVFEEFNP հͰ͖·ͤΜͰ͕ͨ͠ɺ πʔϧνοϓͷ࣮͍ͬͯ·͢
Ҏ্Ͱ͢ ͋Γ͕ͱ͏͍͟͝·ͨ͠