Все още съм доста нов в d3.js и се гмуркам в пример за wordcloud, използвайки d3-cloud repo: https://github.com/jasondavies/d3-cloud
Примерът, който е там, работи за мен, превърнах го във функция, за да мога да я извикам, когато данните се актуализират:
wordCloud : function(parameters,elementid){
var p = JSON.parse(JSON.stringify(parameters));
var fill = d3.scale.category20();
if (d3.select(elementid).selectAll("svg")[0][0] == undefined){
var svg = d3.select(elementid).append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform", "translate(300,300)");
}else var svg = d3.select(elementid).selectAll("svg")
.attr("width", 500)
.attr("height", 500)
.select("g")
.attr("transform", "translate(300,300)");
d3.layout.cloud().size([300, 300])
.words(p.data)
.padding(5)
.rotate(function(d) {return ~~(Math.random()) * p.cloud.maxrotation; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
console.log(words)
console.log(words.length)
svg.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) {return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.text(function(d) {console.log("enter text " + d.text) ; return d.text; });
svg.selectAll("text")
.data(words).transition().duration(2000).attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + Math.random() * p.cloud.maxrotation + ")";
})
}
}
Кодът работи за мен. елемент id = елементите, които свързвате с параметри = всички параметри, които трябва да мога да задам, включително данни (parameters.data).
С изключение на опаковката, кодът не е променен много от оригинала: https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html
Когато обаче добавя нова дума към wordcloud (така че когато актуализирам данните), новата дума не се разпознава. Поставих лог изход на няколко места и очевидно във функцията за изтегляне данните са неправилни, но преди всичко е наред.
например: оригинал: [{"text":"this","size":5},{"text":"is","size":10},{"text":"a","size":50},{"text":"sentence","size":15}]
(кодът добавя други свойства, но това е за простота на обяснението)
Добавям: "тестване" с размер 5
правилно би било
[{"text":"this","size":5},{"text":"is","size":10},{"text":"a","size":50},{"text":"sentence","size":15},{"text":"testing","size":5}]
но получавам резултати като:
[{"text":"a","size":50},{"text":"testing","size":5},{"text":"this","size":5},{"text":"sentence","size":15}]
--> добавена е нова дума, премахната е по-стара (не знам защо) и масивът е объркан.
ВЪПРОС:
- Някой има ли идея какво правя погрешно?
or
- Някой има ли работещ пример за d3.js wordcloud, който можете да актуализирате с нови думи посредством, да кажем, поле за въвеждане?