Данни за актуализиране на Wordcloud/работещ пример за добавяне на думи към облак?

Все още съм доста нов в 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}]

--> добавена е нова дума, премахната е по-стара (не знам защо) и масивът е объркан.

ВЪПРОС:

  1. Някой има ли идея какво правя погрешно?

or

  1. Някой има ли работещ пример за d3.js wordcloud, който можете да актуализирате с нови думи посредством, да кажем, поле за въвеждане?

person Sleenee    schedule 05.06.2014    source източник


Отговори (1)


Мисля, че имате същия проблем с мен. Размерът на всички думи не се побира във вашия svg и d3.layout.cloud по някакъв начин премахне прекалено голямата дума. Опитайте да увеличите ширината и височината на вашия svg или намалете размера на вашата дума. Това, което направих, е да проверя дали x, y, ширината и височината на думата са извън кутията. Ако да, намалете размера или увеличете ширината и височината. Поправи ме ако греша

person yk1007    schedule 28.10.2014