私はまだd3.jsにかなり慣れていないので、d3-cloudリポジトリを使用してワードクラウドの例に飛び込んでいます: 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 + ")";
})
}
}
コードは私のために働きます。element id = バインドする要素 parameters = データ (parameters.data) を含む、設定できるすべてのパラメーター。
パッケージングを除いて、コードはオリジナルからあまり変更されていません: https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html
ただし、ワードクラウドに新しい単語を追加すると (データを更新すると)、新しい単語が認識されません。ログ出力をいくつかの場所に配置しましたが、明らかに描画機能でデータが正しくありませんが、問題が発生する前です。
例: original: [{"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}]
--> 新しい単語が追加され、古い単語が削除され (理由がわからない)、配列が混同されました。
質問：
- 誰かが私が間違っていることを知っていますか?
また
- 入力ボックスを使用して新しい単語で更新できる d3.js ワードクラウドの実例を持っている人はいますか?