1

我对 d3.js 还是很陌生，我正在使用 d3-cloud 存储库深入研究 wordcloud 示例：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. 有人知道我做错了什么吗？

或者

  1. 有没有人有一个 d3.js wordcloud 的工作示例，您可以通过输入框来更新新词？
4

1 回答 1

0

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

于 2014-10-28T03:27:38.283 回答