Обновить слова (изменить размер или удалить слова) в облаке слов D3 без изменения их положения?

Я использую библиотеку облака слов в D3 Джейсона Дэвиса. Это обычный код, который я использую, и он отлично подходит для создания словесных облаков.

    d3.layout.cloud().size([width, height])
            .words(d3.zip(vis_words, vis_freq).map(function(d) {
                                    return {text: d[0], size: wordScale(d[1]) };
                                    }))
            .padding(1)
            .rotate(function() { return ~~(Math.random() * 2) * 0; })
            .font("times")
            .fontSize(function(d) { return d.size; })
            .on("end", draw)
            .start();

    function draw(words) {
            d3.select(curr_id).append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + width/2 + "," +  height/2 + ")")
                    .selectAll("text")
                    .data(words)
                    .enter()
                    .append("text")
                    .transition()
                    .delay(function(d,i){
                                    return i*100;
                                    })
                    .duration(1000)
                    .ease("elastic")
                    .style("font-size", function(d) { return d.size + "px"; })
                    .style("font-family", "times")
                    .style("fill", function(d, i) { return fill(i); })
                    .attr("text-anchor", "middle")
                    .attr("transform", function(d) {
                                    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                                    })
                    .text(function(d) { return d.text; });
    }

У меня есть ползунок времени, чтобы выбрать конкретное значение, в зависимости от того, какие слова в облаке слов имеют разную частоту (заданную размером) или некоторых слов нет вообще. Мне нужно обновить, не перерисовывая все облако слов, что я сейчас делаю. В каком-то смысле я хочу сохранить положение слов фиксированным и просто обновлять их размер и существуют ли они на основе значения, выбранного на ползунке?

Должен ли я для этого вводить функцию обновления в отрисовку функции? Я, конечно, новичок в D3, и любая помощь будет отличной?


javascript updates d3.js tag-cloud word-cloud
person Anuj    schedule 04.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Для этого вы должны выбрать существующие элементы text и установить для них свойство font-size. Код для этого выглядит так:

d3.select("svg").selectAll("text")
  .style("font-size", function(d, i) { // do something });
person Lars Kotthoff    schedule 04.03.2014
comment
Однако одно предупреждение: если это увеличивает размер слов, они могут перекрываться. Если вы не хотите, чтобы это происходило, рассчитайте исходный макет слов на основе максимально возможного размера для каждого из них, а затем отрегулируйте размер (или видимость) в зависимости от значения вашего ползунка. У вас может быть много лишних пробелов, но это, вероятно, лучше, чем перекрытие. - person AmeliaBR; 04.03.2014
comment
@Lars Спасибо за комментарий, но, как и в приведенном выше фрагменте кода, я уже устанавливаю свойство font-size. - person Anuj; 05.03.2014
comment
@AmeliaBR Я удалил attr (transform, ***), который переводит слова в их новое местоположение, чтобы они оставались там, но тогда есть очевидные совпадения. Основная проблема в моем случае заключается в том, что функция, которая даже вызывает макет для расчета размера слова и рисует облако слов, должна вызываться снова и снова, тогда как я могу рассчитать исходный макет слов на основе максимально возможного размера каждый? - person Anuj; 05.03.2014
comment
@Anuj Если вы не хотите устанавливать размер шрифта, что вы хотите сделать? - person Lars Kotthoff; 05.03.2014
comment
@LarsKotthoff Прочтите комментарий выше. Я хочу изменить размер слов в зависимости от выбранного мной wordScale. Но при прохождении слов через макет пересчитывалась позиция слов, чего я хочу избежать. Удаление .attr (transform, ***) действительно помогает мне не менять расположение слов, но когда добавляются новые слова или некоторые слова выходят при перемещении ползунка, есть очевидные совпадения. Пытаемся предотвратить такое совпадение. Надеюсь это поможет :). - person Anuj; 05.03.2014
comment
Что ж, похоже, вам придется перезапустить макет. Нет никакой гарантии, что вы сможете масштабировать слова до нового размера без их перемещения или перекрытия. Если вы возьмете максимальный размер (для которого вам нужно будет установить максимальное значение для каждого слова перед запуском макета), в большинстве случаев вы получите много пустого места. - person Lars Kotthoff; 05.03.2014