Javascript 在不改变位置的情况下更新D3单词云中的单词(更改大小或删除单词)?

Javascript 在不改变位置的情况下更新D3单词云中的单词(更改大小或删除单词)?,javascript,d3.js,updates,tag-cloud,word-cloud,Javascript,D3.js,Updates,Tag Cloud,Word Cloud,我正在使用Jason Davies在D3中的单词云库。这是我正在使用的普通代码,可以很好地创建单词clouds d3.layout.cloud().size([width, height]) .words(d3.zip(vis_words, vis_freq).map(function(d) { return {text: d[0], size: wordScale(d[1]) };

我正在使用Jason Davies在D3中的单词云库。这是我正在使用的普通代码,可以很好地创建单词clouds

    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新手,任何帮助都会很好?

要做到这一点,您需要选择现有的
文本
元素,并为它们设置
字体大小
属性。执行此操作的代码如下所示:

d3.select("svg").selectAll("text")
  .style("font-size", function(d, i) { // do something });

不过有一个警告:如果这增加了单词的大小,它们可能会重叠。如果不希望出现这种情况,请根据每个单词的最大可能大小计算单词的原始布局,然后根据滑块值调整大小(或可见性)。您可能有很多额外的空格,但这可能比重叠要好。@Lars谢谢您的评论,但正如在上面共享的代码段中一样,我已经设置了font size属性。@AmeliaBR我确实删除了attr(“transform”,“***”),它将单词翻译到新位置,以便它们留在那里,但也有明显的重叠。在我的例子中,主要的问题是,甚至调用布局来计算字号和绘制单词云的函数都会被反复调用,那么如何根据每个词的最大可能大小来计算单词的原始布局?@Anuj如果不想设置字体大小,你想做什么?听起来你需要重新运行布局。无法保证您能够在不移动单词或重叠的情况下将单词缩放到新的大小。如果您选择最大大小(在运行布局之前,必须为每个单词设置最大值),在大多数情况下,您将得到大量的空白空间。