javascript - 词云更新数据/向云添加词的工作示例？

Question

我对 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 + ")";
            })

        } 
    }   

该代码对我有用。 元素 id = 您绑定(bind)到的元素 参数 = 我应该能够设置的所有参数，包括数据(parameters.data)。

除了包装之外，代码与原始代码相比没有太大改变: https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html

但是，当我向词云添加新单词时(因此当我更新数据时)，新单词无法识别。我已将日志输出放在几个地方，显然在绘图函数中数据不正确，但在它正常之前。

例如: 原文:[{"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. 有人知道我做错了什么吗？

或

有人有 d3.js 词云的工作示例吗？您可以通过输入框来更新新词？

Answer 1

我想你和我有同样的问题。所有单词的大小都不适合您的 svg，并且 d3.layout.cloud 以某种方式删除了过大的单词。尝试增加 svg 的宽度和高度或减小 word 的大小。我所做的是检查单词的 x、y、宽度和高度是否是现成的。如果是，请减小尺寸或增加宽度和高度。如果我错了请纠正我