需要有关更新D3.js wordcloud的帮助

Question

我根本不是程序员，虽然我正在尝试使用d3编写wordcloud生成器。 我正在网上挖掘示例，到目前为止一切正常，但是目前如果我点击“Make Wordcloud”按钮它只是添加了另一个wordcloud，我希望它更新现有的。 虽然，我相信我缺乏完成它的知识。 你们能帮忙吗？ 这是代码：

$('#btn-wordcloud').click(function() {
    if (codebtn_click_counter < 1) {
        alert("please hit Code Data button first");
    } else {

        // Get all of the words
        words = [];
        wordscnt = [];
        var data = hot.getData();
        for (i = 0; i < data.length; i++) {
            for (j = 1; j < data[i].length; j++) {
                if (data[i][j]) {
                    if (words[data[i][j]]) {
                        words[data[i][j]]++;
                    } else {
                        words[data[i][j]] = 1;
                    }
                }
            }
        }

        for (word in words) {
            if (word != "None" && words[word] > 2) {
                var row = {
                    "text": word.toUpperCase(),
                    "size": words[word] * 15
                }
                wordscnt.push(row)
            }
        }

        if (wordscnt.length > 0) {
            $('#data').hide();
            var fill = d3.scale.category20();
            maxSize = d3.max(wordscnt, function(d) {
                return d.size;
            });
            minSize = d3.min(wordscnt, function(d) {
                return d.size;
            });

            var fontScale = d3.scale.linear() // scale algo which is used to map the domain to the range
            .domain([minSize, maxSize]) //set domain which will be mapped to the range values
            .range([15, 80]); // set min/max font size (so no matter what the size of the highest word it will be set to 40 in this case)

            if (codebtn_click_counter >= 1 && click_counter == 0) {
                click_counter = ++click_counter;
                d3.layout.cloud().size([1000, 500])
                    .words(wordscnt.sort(sortWordCountObject))
                //.rotate(function() { return ~~(Math.random() * 2) * 90; })
                .padding(5)
                    .rotate(0)
                    .font("Impact")
                //.fontSize(function(d) { return d.size; })
                .fontSize(function(d) {
                    return fontScale(d.size)
                })
                    .on("end", draw)
                    .start();
            } else {
                //* How do I update the svg created?

            };

            function draw(words) {
                d3.select("#drawing").append("svg")
                    .attr("width", 1000)
                    .attr("height", 500)
                    .append("g")
                    .attr("transform", "translate(500,250)")
                    .selectAll("text")
                    .data(words)
                    .enter().append("text")
                    .style("font-size", function(d) {
                        return d.size + "px";
                    })
                    .style("font-family", "Expressway")
                //* .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;
                    });
            }
        }
    }
});

Answer 1

关键在于你的draw功能。 注意d3.select("#drawing").append("svg")行d3.select("#drawing").append("svg") 。 这意味着每次调用函数时，它都会添加另一个SVG。 现在，虽然您可以创建另一个函数来执行此操作，但也可以通过使用与.data函数关联的函数在同一函数中完成此操作： .enter()和.exit() 。

function draw(words) {
  var words = d3.select("#drawing").selectAll("svg").data([0]).enter().append("svg")
    .attr("width", 1000)
    .attr("height", 500)
    .append("g")
    .attr("transform", "translate(500,250)")
    .selectAll("text")
    .data(words);

  words.enter().append("text")
    .style("font-family", "Expressway")
    //* .style("fill", function(d, i) { return fill(i); }) *//
    .attr("text-anchor", "middle")

  words.style("font-size", function(d) {
      return d.size + "px";
    })
    .attr("transform", function(d) {
      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    })
    .text(function(d) {
      return d.text;
    });

  words.exit().remove();
}

关于.data() ：

• 此函数使用数组并尝试将该数组与选择提供的对象匹配selectAll("text")在本例中为selectAll("text") ）。
• .enter()只影响新对象，数组中没有匹配对象的元素（数组元素多于对象）
• 相反， .exit()会影响没有匹配数组的对象（比数组元素更多的对象）
• 只需调用words.<function>将影响所有对象。

所以它的作用是创建单词并应用font-family和text-anchor设置，然后使用相关的font-size ， transform和text更新所有text 。 最后，它删除了任何现有的单词。