2017-09-06 12 views
0

d3 단어 구름 (https://github.com/jasondavies/d3-cloud)을 사용하고 있습니다. 꽤 잘 작동하지만 버튼을 클릭 할 때마다 단어를 업데이트해야합니다. 내가 온라인에 대한 정보를 찾을 수 없습니다d3 Word Cloud in 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

감사합니다! 그것은 작동합니다. –