Данные обновления Wordcloud/рабочий пример добавления слов в облако?

Я все еще довольно новичок в d3.js, и я погружаюсь в пример wordcloud, используя репозиторий 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 + ")";
            })

        } 
    }   

Код работает для меня. идентификатор элемента = элементы, которые вы привязываете к параметрам = все параметры, которые я должен иметь возможность установить, включая данные (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}]

--> добавлено новое слово, удалено старое (не знаю почему) и массив перепутан.

ВОПРОС:

1. Кто-нибудь знает, что я делаю неправильно?

or

2. У кого-нибудь есть рабочий пример d3.js wordcloud, который вы можете обновить новыми словами, скажем, с помощью поля ввода?