This would be a great feature. If we could provide tagcloud--items as object with a class key we could style them individually or in groups. The latter is what I'm looking for in my portfolio site. I have a dropdown with categories. The idea is whatever category is chosen, the tags belonging to that group will stand out in a specific color.

First of all, thanks for sharing this great work.

I am about to use TagCloud.min.js for my website, but during testing my browser sends this error
Se esperaba 'none', una URL o una función de filtrado, pero se encontró 'alpha('. Error al interpretar el valor para 'filter'. Declaración rechazada
English translation : Expected 'none', a URL or a filter function, but found 'alpha('. Error interpreting the value for 'filter'. Statement rejected

It seems it comes from all the lines using n.style.filter="alpha(opacity

After looking into the css "filter" properties it seems it cannot be used with Alpha. Am I missing something here ?

Also I cannot understand the difference between TagCloud.js and TagCloud.min.js Could you please tell me ? The code is a bit complex for me to understand.

Thank you

Hello Developers,
My name is Anurag Raj. I used the TagCloud in my portfolio but whenever I am deploying it either on vercel or gituhub.io it is not showing anything. Also, there is no error in the terminal. Can you please have a look into it? This package holds a lot of importance in my Portfolio website.
You can check my recent portfolio where it is not showing. It's just below the Download CV button.
https://anurag8305.github.io/

Hi,

I'm trying to integrate this tool in my angular 8 app, but with no success.

What I've tried so far:

• I Installed TagCloud using npm install
• I integrated tagCloud.js in my angular.json file :

"scripts": [
..
"./node_modules/TagCloud/dist/TagCloud.min.js",
...
],

• I created a tagCloudFunction.js file under /src/assets/js and pasted the above code

const TagCloud = require('TagCloud');
const container = '.tagcloud';
const texts = [
'3D', 'TagCloud', 'JavaScript',
'CSS3', 'Animation', 'Interactive',
'Mouse', 'Rolling', 'Sphere',
'6KB', 'v2.x',
];
const options = {};
TagCloud(container, texts, options);

• I integrated the tagCloudFunction.js also in angular.json file

"scripts": [
"./node_modules/TagCloud/dist/TagCloud.min.js",
"src/assets/js/tagCloud.js"
]

• Finally I called the function TagCloud from my component.ts declare const TagCloud : any;

Hi mcc108!

Thanks again for taking the time to look at my previous issue. I have a single other question for you specific to my usage of the TagClouds.

I'm having a little difficulty understanding the source code of TagCloud.js. I was wondering how (or if) general onclick Events can be added to the tags of the cloud. I noticed that there is a handler for mousemove event for the changes in directions. I also noticed that when hovering over a tag a highlight is given as well as a 'clicking option'. Is there perhaps an option that I could add an eventlistener specific for the onclick events?

Thank you in advance.

I have these two demand right now, and I browse TagCloud source code but can't find relation setting.

Can you add these two attributes? I think it is a most people's demand.

^_^

Hi all,

TagCloud is great. I was able to get it working on my React project with the help of the other members under the Issues subtopics. My one complaint is that the radius units should be able to be adjusted to rem or some other unit to preserve responsiveness. Using this component in my projects breaks the screen when size is readjusted.

Was anyone about to have a seamless experience integrating this within their responsive project?

I installed the library using this command npm install TagCloud --save-dev and because of a types error I imported it like this
const TagCloud = require('TagCloud');. After running the react app multiple spheres appear.

And another problem is when I change the javascript it doesn't affect the sphere, also on every alternate reload it doesn't load

import React from 'react';
import './about.scss';

function About() {
  const TagCloud = require('TagCloud');

  const myTags = [
    'JavaScript',
    'CSS',
    'HTML',
    'Vscode',
    'XD',
    'React',
    'Python',
    'Linux',
    'git',
    'Flutter',
    'Dart',
    'Firebase',
    'SASS',
    'JSON',
    'Figma',
  ];

  TagCloud('.content', myTags, {
    radius: 250,
    maxSpeed: 'fast',
    initSpeed: 'fast',
    direction: 135,
    keep: true,
  });

  return (
    <div className="About" id="About">
      <div className="left">
        <div className="heading">
          <h1>ABOUT</h1>
        </div>
        <div className="para">
          <p>
            I am a high school student located in India, I am passionate about
            UI designing, android development, web development and automation.
          </p>
          <br></br>
          <p>
            Love automating daily boring tasks using python, Linux OS, gaming
            and in sports: football and badminton.
          </p>
          <br></br>
          <p>
            <a href="#Contact">Contact me</a>
          </p>
        </div>
      </div>
      <div className="right">
        <span className="content"></span>
      </div>
    </div>
  );
}

export default About;

不好意思，已经解决了

Hi,

Thanks for a really cool library.
I have an issue though. Been using the cloud in my react, nextjs and vite projects but it renders (seemingly) at random on all three. In most cases it's a component which is only visible when scrolled into view. In some cases it's a slide in a slider/swiper/image gallery. What could be some possible reasons for this behavior?

I'm using 2.3.2 and @frank-mayer/react-tag-cloud: 1.1.1

do like this minimal compact design, but can we enable dragging interaction like what is shown in https://www.goat1000.com/tagcanvas-drag.php

I want to work with fontAwesome icons instead of text but it doesn't work
is there any solution to make it possible

I am trying to make the sphere responsive.
Is it possible to make the sphere the size of the element?

多个tagcloud 同时随鼠标滚动

Does it have vuejs 3 wrapper?

I've set useHTML to true and if I give for e.g. <div> HTML </div> in texts array it conceders it as a string and renders as it is.

🇬🇧
Hey, is there any way that we can have an option to invert the direction it spins depending on the mouse position? currently the items practically run away from you which isnt great for my use case.

🇨🇳
嘿，我们有没有办法提供一个选项，根据鼠标位置反转旋转方向？
目前，物品几乎都会从你身边跑开，这对我的用例来说不是很好。

是否能拓展下，不只是text文本，可以是任何dom元素在容器内旋转，类似soul的星球转动效果

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.

Hi,

For some reason, the tag cloud begins to vibrate very quickly which prevents smooth rotation. Sometimes all the words are compressed together in the middle of the cloud. Only seems to happen on Safari.

I'm trying to implement this TagCloud as a ImageCloud but I encountered a problem with the opacity / Zindex :

I resolved it by adding an observer to every .tagcloud--item. I've not managed changed object class name but here is the code:

// Options for the observer (which mutations to observe)
const config = {attributes: true, attributeFilter: ['style']};

// Callback function to execute when mutations are observed
const changeOpacity = function (mutationsList, _) {
    for (const mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            mutation.target.style.zIndex = 100 * (mutation.target.style.opacity);
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(changeOpacity);

const tags = document.querySelectorAll(.tagcloud--item);

for (const tag of tags) {
    // Start observing the target node for configured mutations
    observer.observe(tag, config);
}

Here is the final result 👍

Hope this helps !

标签不是均匀分布的，重叠严重。
部分标签opacity透明度一直为0，不会变化。

made animation via tag cloud in react. I copied the code.) Everything works well. But after deploying the animation does not work if you click on the link. Everything works locally