[Vue + typescript] d3.js

VUE.JS 목록

설치

$ npm install --save-dev d3
$ npm install --save-dev @types/d3

 

<template>
  <div>
    
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import * as d3 from 'd3'

@Component
export default class DashboardView extends Vue 
  const tooltip = d3.select('body')
      .append('div')
      .attr('class', 'tooltip')
      .style('opacity', 0)
      
  d3.select(this.$el)
      .append('svg')
      .attr('width', this.width)
      .attr('height', this.height)
      .append('g')
      .attr('transform', `translate(${this.width / 2},${this.height / 2})`)
      .selectAll('text')
      .data(words)
      .enter()
      .append('text')
      .style('font-family', (d: any) => d.font)
      .style('font-size', (d: any) => {
        return `${d.size}px`
      })
      .style('fill', _fill)
      .attr('text-anchor', 'middle')
      .attr('transform', (d: any) => {
        return `translate(${[d.x, d.y]})rotate(${d.rotate})`
      })
      .text((d: any) => d.text)
      .on('click', d => this.onWordClick(d.target.__data__))
      .on('mouseover', (d: any) => {
        // console.log(d, d.target.__data__)
        tooltip.transition()
          .duration(30)
          .style('opacity', 1)
          .style('z-index', '999')
        tooltip.html(`${d.target.__data__.text} (${d.target.__data__.value})`)
          .style('left', d.clientX + 'px')
          .style('top', (d.clientY - 28) + 'px')
      })
      .on('mouseout', (d: any) => {
        tooltip.transition()
          .duration(0)
          .style('opacity', 0)
          .style('z-index', '-1')
      })
}
</script>

 

VUE.JS 목록