Vue.js + D3.jsでグラフを描く

Vue.js + D3.jsでグラフを描く

Vue.js Tokyo v-meetup #7 LTスライド

Ef6c05eebeab8dc5024aed482a87d527?s=128

Tatsuya Miyado

May 23, 2018
Tweet

Transcript

  1. 7VFKT %KTͰ άϥϑΛඳ͘ 7VFKT5PLZPWNFFUVQ !IPHFTVLF@

  2. !IPHFTVLF@

  3. 7VFKTͰάϥϑΛ ඳ͖͍ͨ

  4. %KTΛ࢖͍͍ͨ

  5. 7VFKT %KTͬͯ Ͱ͖Δͷʁ

  6. ΍ͬͯΈ·ͨ͠

  7. %&.0 IUUQHSBQIIPHFTVLFOFU

  8. ·ͣ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. ͜ΕΛ7VF ίϯϙʔωϯτʹམͱ͠ࠐΉ

  10. 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(ཁૉͷੜ੒ ೖྗσʔλΛඳըྖҬʹ Ϛοϐϯά͢Δؔ਺ͷੜ੒ ݩͷίʔυ
  11. :࣠ 9࣠ ύε ίϯϙʔωϯτ෼ׂ άϥϑશମ

  12. <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ଐੑͷ஋Λੜ੒
  13. <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 ఺ͱ఺ΛͲͷΑ͏ͳۂઢͰ ิؒ͢Δ͔ͷࢦఆ
  14. 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ཁૉʹ ඳը͢Δ
  15. 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 ࣠ͷ໨੝Γʹ ؔ͢ΔઃఆΛߦ͏
  16. Ξχϝʔγϣϯ w $44USBOTJUJPOͰQBUIΛΞχϝʔγϣϯͰ͖Δʁ w $ISPNFҎ֎Ͱ͸ Ͱ͖ͳ͍ w ผͷखஈ͕ඞཁ

  17. Ξχϝʔγϣϯ w 5XFFO-JUFKTΛ࢖͏ w ͋Δ஋Λࢦఆͷඵ਺Ͱɺࢦఆͷ஋·ͰঃʑʹมԽͤ͞Δ ػೳΛ࣋ͭ const hoge = {

    a: 0 }; TweenLite.to(hoge, 3, { a: 100 }); AIPHFBAͷ஋Λඵ͔͚ͯ·ͰมԽͤ͞Δ
  18. Ξχϝʔγϣϯ 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

  19. άϥϑͷඳը͕Ͱ͖ͨ

  20. %&.0ͷίʔυ IUUQTHJUIVCDPNIPHFTVLFWVFEEFNP ঺հͰ͖·ͤΜͰ͕ͨ͠ɺ πʔϧνοϓͷ࣮૷΋΍͍ͬͯ·͢

  21. Ҏ্Ͱ͢ ͋Γ͕ͱ͏͍͟͝·ͨ͠