更新D3词云中的单词(大小更改或删除单词)而不更改其位置?

时间:2014-03-04 06:07:20

标签: javascript d3.js updates tag-cloud word-cloud

我在杰森戴维斯的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来说肯定是新手,任何帮助都会很棒吗?

1 个答案:

答案 0 :(得分:1)

为此,您需要选择现有的text元素并为其设置font-size属性。执行此操作的代码如下所示:

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