[英]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.