簡體   English   中英

d3 Java語言中的字雲-無法使用更新功能

[英]d3 Word Cloud in Javascript - Can't use update function

我正在使用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();
        }
    }

}

我在網上找不到有關它的信息。 如何從“外部世界”調用此函數?

wordCloud(selector)返回包含update方法的對象。

因此,這應該工作:

var wordCloud = wordCloud("#myDiv");

wordCloud.update(myWords);

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM