需要有關更新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 。 最后，它刪除了任何現有的單詞。