2017-09-06 114 views
0

我正在使用d3文字雲(https://github.com/jasondavies/d3-cloud)。它工作得很好,但我需要每次點擊一個按鈕時更新單詞。在我發現有另一個函數的返回如下面的代碼年底宣佈的「更新」功能的代碼:d3詞雲在Javascript中 - 無法使用更新功能

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(); 
     } 
    } 

} 

我不能在網上找到關於它的信息。我如何從「外部世界」調用這個函數?

回答

1

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

所以,這應該工作:

var wordCloud = wordCloud("#myDiv"); 

wordCloud.update(myWords); 
+0

謝謝!有用 –