javascript - Javascript 中的 d3 词云 - 无法使用更新功能

Question

我正在使用 d3 词云 ( https://github.com/jasondavies/d3-cloud )。它工作得很好，但每次单击按钮时我都需要更新单词。在我发现的代码中，在另一个函数的返回中声明了一个“更新”函数，如下面的代码末尾所示:

function wordCloud(selector) {
    //lookForWords();
    var fill = d3.scale.category20();

    //Construct the word cloud's SVG element
    $(selector).html("");
    var svg = d3.select(selector).append("svg")
        .attr("width", 1000)
        .attr("height", 800)
        .append("g")
        .attr("transform", "translate(250,250)");

    $("svg").css('position','absolute');
    $("svg").css('top','250px');
    $("svg").css('left','500px');
    $("svg").css('overflow','visible');
    //Draw the word cloud
    function draw(words) {

        var cloud = svg.selectAll("g text")
                        .data(words, function(d) { return d.text; })

        //Entering words
        cloud.enter()
            .append("text")
            .style("font-family", "Impact")
            .style("fill", function(d, i) { return fill(i); })
            .attr("text-anchor", "middle")
            .attr('font-size', 1)
            .text(function(d) { return d.text; });

        //Entering and existing words
        cloud
            .transition()
                .duration(3500)
                .style("font-size", function(d) { return d.size + "px"; })
                .attr("transform", function(d) {
                    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
                .style("fill-opacity", 1);

        //Exiting words
        cloud.exit()
            .transition()
                .duration(3500)
                .style('fill-opacity', 1e-6)
                .attr('font-size', 1)
                .remove();
    }


    //Use the module pattern to encapsulate the visualisation code. We'll
    // expose only the parts that need to be public.
    return {

        //Recompute the word cloud for a new set of words. This method will
        // asycnhronously call draw when the layout has been computed.
        //The outside world will need to call this function, so make it part
        // of the wordCloud return value.
        update: function(words) {
            d3.layout.cloud().size([1000, 1000])
                .words(words)
                .padding(1)
                .rotate(function() { return ~~(Math.random() * 2) * 90; })
                .font("Impact")
                .fontSize(function(d) { return d.size; })
                .on("end", draw)
                .start();
        }
    }

}

我在网上找不到相关信息。我如何从“外部世界”调用这个函数？

Answer 1

wordCloud(selector) 返回一个包含 update 方法的对象。

所以，这应该有效:

var wordCloud = wordCloud("#myDiv");

wordCloud.update(myWords);