반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- centos
- build
- TensorFlow
- unittest
- IOS
- androidstudio
- vsCode
- 리눅스
- 네트워크
- 개발
- MAC
- linux
- Chrome
- 티스토리챌린지
- 맥
- localserver
- 센토스
- node
- 오블완
- Android
- PYTHON
- react
- MachineLearning
- jest
- qunit
- webpack
- VirtualBox
- ReactNative
- xcode
Archives
- Today
- Total
로메오의 블로그
[Vue + typescript] d3.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>
반응형
'Frontend > Vue' 카테고리의 다른 글
[Vue3 + typescript] vuetify 설치 (0) | 2022.09.05 |
---|---|
[Vue3 + typescript] 프로젝트 생성 vite (0) | 2022.09.05 |
[Vue + typescript] chart.js (0) | 2022.08.04 |
[Vue + typescript] *.d.ts 파일 만들기 (0) | 2022.08.03 |
[Vue + typescript] filter 사용하기 (0) | 2022.06.22 |
Comments