4

Eu tenho uma nuvem de tags e quero mudar o tamanho da fonte de cada tag conforme o uso delas.

Preciso ter um tamanho mínimo e um tamanho máximo.

Qual seria a fórmula para calcular o tamanho das tags?

1 Resposta 1

6

Eu criei alguns exemplos para esclarecer a resposta do Delan.

Basicamente a formula é:

(tagAtual.Usos / maiorNumeroDeUsos) * (fonteMaxima - fonteMinima) + fonteMinima

Exemplo em Javascript

var tags =
[
    { Name: "c#", Uses: 100 },
    { Name: ".net", Uses: 75 },
    { Name: "typescript", Uses: 50 },
    { Name: "lua", Uses: 50 },
    { Name: "javascript", Uses: 25 },
    { Name: "jquery", Uses: 1 },
    { Name: "c++", Uses: 0 },
];

var max = 100; // Deve ser computado
var min = 0;   // Deve ser computado

var fontMin = 10;
var fontMax = 20;

for (var i in tags)
{
    var tag = tags[i];

    var size = tag.Uses == min ? fontMin
        : (tag.Uses / max) * (fontMax - fontMin) + fontMin;
}

Saída:

c#             font-size: 20
.net           font-size: 17.5
typescript     font-size: 15
lua            font-size: 15
javascript     font-size: 12.5
jquery         font-size: 10
c++            font-size: 10

Exemplo em C#

var tags = new List<Tag>
{
    new Tag { Name = "c#", Uses = 100 },
    new Tag { Name = ".net", Uses = 75 },
    new Tag { Name = "typescript", Uses = 50 },
    new Tag { Name = "lua", Uses = 50 },
    new Tag { Name = "javascript", Uses = 25 },
    new Tag { Name = "jquery", Uses = 5 },
    new Tag { Name = "c++", Uses = 5 },
};

int max = tags.Max(o => o.Uses);
int min = tags.Min(o => o.Uses);

double fontMax = 20;
double fontMin = 10;

foreach (var tag in tags)
{
    double size = tag.Uses == min ? fontMin
        : (tag.Uses / (double)max) * (fontMax - fontMin) + fontMin;
}

Saída:

c#             font-size: 20
.net           font-size: 17.5
typescript     font-size: 15
lua            font-size: 15
javascript     font-size: 12.5
jquery         font-size: 10
c++            font-size: 10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .