cong-min / TagCloud

☁️ 3D TagCloud.js rotating with mouse
https://cong-min.github.io/TagCloud/examples
MIT License
356 stars 91 forks source link

Inanimate Tags #5

Closed DRavenNISV closed 3 years ago

DRavenNISV commented 4 years ago

I have noticed an issue with these TagClouds. Whenever I add a number of tags, some of the tags are not visible (only when hovered over using a mouse). These tags are also not moving and stay in the same (central) position. Whether or not a tag has this issue appears to be random.

I'm sorry if this is a mistake on my side, but the randomness of the error is what makes me think it is not.

cong-min commented 4 years ago

Could you post code to show me how you add the tags?

DRavenNISV commented 4 years ago

Absolutely! I push a list of strings gained from a SPARQL query to a myTags array and update the tagCloud after every tag.

<script src="./TagCloud.min.js"></script>
    <script>
      var myTags = [];

      var tagCloud = TagCloud('.content', myTags,{

        // radius in px
        radius: 425,

        // animation speed
        // slow, normal, fast
        maxSpeed: 'normal',
        initSpeed: 'normal',

        // 0 = top
        // 90 = left
        // 135 = right-bottom
        direction: 135,

        // interact with cursor move on mouse out
        keep: true

        });
    </script>

    <script>  
      function filltags(){
        var url = "http://localhost:5820/Barbara/query?reasoning=true";
        var query = "PREFIX BarbaraNanning: <http://www.semanticweb.org/ontologies/Daan/2020/BarbaraNanning#> PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> SELECT DISTINCT ?label WHERE { ?x rdfs:label ?label. {?x rdf:type owl:Class.} UNION {?x rdf:type owl:NamedIndividual.} }";

        $.ajax({
          headers : {
              Accept: 'application/sparql-results+json'
          },
          url: url,
          data: {
              query: query
          },
          success: function(data) {
              var results = data.results.bindings;
              results.sort(function() { return .5 - Math.random();});
              var limit = 75;
              var limitresults = results.slice(0, limit);
          $.each(limitresults, function(key,data){
            var artworkLabel = data["label"]["value"];
            myTags.push(artworkLabel);
            tagCloud.update(myTags);
          });
          }
        });
      }
    </script>
DRavenNISV commented 4 years ago

An important note is that this goes right for over 90% of the tags. It often only fails for 2.

cong-min commented 4 years ago

How many tags have you added? and what browser are you using?

DRavenNISV commented 4 years ago

I have added a total of 75 tags. However, at times I had the same problem with 10 or even 1 tag. I have reproduced the issue both using Chrome and Safari.

cong-min commented 4 years ago

Ok, thanks for your feedback. I will try to reproduce and solve this issue in the near future, and optimize some performance

cong-min commented 3 years ago

Sorry to reply you so late, you can try v2.2.0, some optimizations have been made to the animation