weihanchen / angular-d3-word-cloud Goto Github PK

View Code? Open in Web Editor NEW

15.0 15.0 15.0 1.53 MB

angular directive of D3 word cloud plugin, include simple options to binding.

Home Page: https://weihanchen.github.io/angular-d3-word-cloud/

License: MIT License

JavaScript 100.00%

angular d3 wordcloud

angular-d3-word-cloud's People

Contributors

Stargazers

Watchers

Forkers

fincore vonwenm durtto c0zen iestruch ashleedawg uniquejava rodolfosilva vicdashkov techcastgmbh geminidata akhtar-h ktp-forked-repos aliffbm

angular-d3-word-cloud's Issues

Use with Ionic (3) - 'word-cloud' is not a known element

Hello,
I want to use angular-d3-word-cloud in my Ionic3 app project but I have difficulties importing the required dependencies.
I want to use the <word-cloud> element simply in my HTML, as described in https://github.com/weihanchen/angular-d3-word-cloud#directive-usage.

I started by installing the module with npm install angular-d3-word-cloud.
Then I created a custom copy config in order to include the required .js files into the build folder. I did this as described here: https://zerone-consulting.blog/2017/10/10/steps-to-include-custom-cssjs-files-in-ionic-3/
Then, I included the js-files in the <head> of my index.html as follows:

<script src="build/angular.js"></script>
<script src="build/d3.js"></script>
<script src="build/d3.layout.cloud.js"></script>
<script src="build/angular-word-cloud.js"></script>

Note: I used angular.js, d3.js and angular-word-cloud.js instead of angular.min.js, d3.min.js, angular-word-cloud.min.js because i could not find the respective *.min.js-versions within my node_modules-folder.

However, when launching my app I get the following error:

Error: Template parse errors:
'word-cloud' is not a known element:
1. If 'word-cloud' is an Angular component, then verify that it is part of this module.
2. If 'word-cloud' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        <ion-card-content>
            <div id="wordsCloud">
                [ERROR ->]<word-cloud words="allMealNames" width="300px" height="200px" padding="5"
                           "): ng:///AppModule/HistoryPage.html@37:16

The HTML page where I'm using the <word-cloud> element looks like this:

<div id="wordsCloud">
    <word-cloud words="allMealNames" width="300px" height="200px" padding="5"
                         use-tooltip="true" transition="true" on-click="wordClicked()">
    </word-cloud>
</div>

Has anyone got a suggestion for solving this problem?
Thanks

Doesn't support tooltip on firefox

This is easy fix. On line 85 add "d3.event" instead of just "event" in 2 places. I tested on my setup and it works.

Solution from here: https://stackoverflow.com/questions/48227127/d3-event-showing-referenceerror-event-is-not-defined-in-firefox

Angular 2

Any chance you have an angular 2 implementation?

Would you add a LICENSE file

MIT or so? Thank you

Struggling to implement this into an existing AngularJS project

I've added angular-d3-word-cloud into app.js .module - that's OK, no errors

I've added the function appController block into a custom controller - that's OK, no errors

I've added the HTML into the view that's calling the controller I added function appController into - that's OK, no errors

I've added $window, $element into the controllers function but I get the error - angular.js:15018 Error: [$injector:unpr] Unknown provider: $elementProvider <- $element

I'm using custom controllers and not putting the controller code inside of app.js

Word not displayed

I have one label called "Activity Account Access Report", that has a size of 110 and it's not getting displayed. Does this happend because the string is too long for the size?

Add into bower database.

Please add the library into bower repo so we can install it from bower easily.

Remove jquery as dependency

Overview

This is a great looking angular lib with a nice API to integrate into existing projects. The only downside is that it still depends on jquery.

Can the lib be refactored to remove the jquery dep?

Rotate

Hi,

How to disable rotation ?

Thanks

How would you recommend that I set the colors of the words?

Thanks for your great work here, @weihanchen !

Do you have any suggestions about how I should set the colors of individual words?

Thanks for your help! :D

maximum font size?

I notice with smaller viewports/resolutions the word/s with the largest font size/s sometimes drop off. Is there a known issue/relationship between max font size and layout size? Thanks.

PS, handy library, thanks!

Tooltips on mouseover

The library has some css effects on mouseover of the word, thats great.
Any suggestions about adding custom tooltip on mouseover of words.

Thanks

Fix/update bower.json

Hello, thank you for the package.

But, please, update your bower.json file. It fails to setup the lib properly since your actual *.js file is dist/angular-word-cloud.js , while the reference in bower.json points to: "main": ["dist/angular-d3-word-cloud.js"].
It took quite a while to notice this nasty small typo.

For those who unable to use the lib right now, try to use overrides in the main bower.json file of the project like this:

 "overrides": {
    "angular-d3-word-cloud": {
      "main": [
        "dist/angular-word-cloud.js"
      ]
    }
  }