Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue.js + D3.jsでグラフを描く
Tatsuya Miyado
May 23, 2018
Technology
1
1.7k
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
Djangoで組織とユーザーの権限管理をやってみよう #devio2022
seiichi1101
0
360
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
line_developers
PRO
7
2.6k
ソフトバンクでのMECの取り組みについて
sbtechnight
0
300
SBOMを利用したソフトウェアサプライチェーンの保護
masahiro331
0
160
ソフトウェアアーキテクチャの基礎: Software Architecture in a Nutshell
snoozer05
26
8.1k
Goで実装するブランドネットワークとの接続ポイント
pongzu
2
250
Istioを活用したセキュアなマイクロサービスの実現/Secure Microservices with Istio
ido_kara_deru
3
330
Oracle Cloud Infrastructure:2022年7月度サービス・アップデート
oracle4engineer
PRO
0
150
Simplify Cloud Native Security with Trivy
knqyf263
0
470
Cloud Foundryの移行先はどこか? オープンソースPaaS探し
kolinz
0
340
Backlog × RPAでいろいろ捗った話
z_tetsu
0
370
フィンテック養成勉強会#24
finengine
0
320
Featured
See All Featured
Designing Experiences People Love
moore
130
22k
4 Signs Your Business is Dying
shpigford
169
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
A Philosophy of Restraint
colly
192
15k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
Building Your Own Lightsaber
phodgson
95
4.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Debugging Ruby Performance
tmm1
65
10k
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 հͰ͖·ͤΜͰ͕ͨ͠ɺ πʔϧνοϓͷ࣮͍ͬͯ·͢
Ҏ্Ͱ͢ ͋Γ͕ͱ͏͍͟͝·ͨ͠