From 91e597ead1c5c7b0a0a25a2b8d89f8c61eb108e4 Mon Sep 17 00:00:00 2001 From: weihanchen Date: Mon, 20 Nov 2017 15:41:13 +0800 Subject: [PATCH] docs(tooltip): add sample --- README.md | 12 +++++++----- docs/index.html | 30 ++++++++++++++++++++++++++---- docs/js/controllers/app.js | 5 ++++- 3 files changed, 37 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 6b8cbc8..e0aeafb 100644 --- a/README.md +++ b/README.md @@ -58,14 +58,14 @@ Note: if words element not contains color property, default will use [d3 schemeC * `width=[number]` * `padding=[number]` -> [optional] padding for each word, defaults to `5` * `rotate=[number, function]` -> [optional] rotation for each word, default to `~~(Math.random() * 2) * 60` -* `use-tooltip=[boolean]` -* `use-transition=[boolean]` +* `use-tooltip=[boolean]` default tooltip template +* `use-transition=[boolean]` transition with font size * `on-click=[function]` -> word clicked callback ## Directive Usage ## ```html
- +
``` @@ -83,9 +83,11 @@ Inject `angular-d3-word-cloud` into angular module, set up some options to our c self.width = $element.find('#wordsCloud')[0].offsetWidth; self.wordClicked = wordClicked; self.rotate = rotate; + self.useTooltip = true; + self.useTransition = false; self.words = [ - {text: 'Angular',size: 25, color: '#6d989e'}, - {text: 'Angular2',size: 35, color: '#473fa3'} + {text: 'Angular',size: 25, color: '#6d989e', tooltipText: 'Angular Tooltip'}, + {text: 'Angular2',size: 35, color: '#473fa3', tooltipText: 'Angular2 Tooltip'} ] function rotate() { diff --git a/docs/index.html b/docs/index.html index 7224a93..2b365c9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -64,6 +64,8 @@

  • width=[number]
  • padding=[number] -> [optional] padding for each word, defaults to 5
  • rotate=[number, function] -> [optional] rotation for each word, defaults to ~~(Math.random() * 2) * 60
    • +
  • use-tooltip=[boolean] -> [optional] default tooltip template
    • +
  • use-transition=[boolean] -> [optional] transition with font size
  • on-click=[function] -> word clicked callback
    • @@ -74,6 +76,8 @@

    <word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" padding="10" rotate="appCtrl.rotate" + use-tooltip="appCtrl.useTooltip" + use-transition="appCtrl.useTransition" on-click="appCtrl.wordClicked"> </word-cloud> </div> @@ -89,9 +93,11 @@

    self.width = $element.find('word-cloud')[0].offsetWidth; self.wordClicked = wordClicked; self.rotate = rotate; + self.useTooltip = true; + self.useTransition = true; self.words = [ - {text: 'Angular',size: 25,color: '#0e6632'}, - {text: 'Angular2',size: 35,color: '#0e558'} + {text: 'Angular',size: 25,color: '#0e6632',tooltipText: 'Angular Tooltip'}, + {text: 'Angular2',size: 35,color: '#0e558',tooltipText: 'Angular2 Tooltip'} ] @@ -125,8 +131,23 @@