1

我在尝试使用 d3 从单个源 json 创建多个 wordcloud 时遇到了一些麻烦。

编辑：忘了提，我将 wordclouds 建立在 Jason Davies 示例的基础上，here。

有多种指南可用于从同一文件创建小倍数，但我找不到任何涉及为每个图表使用布局模型的内容，就像文字云布局一样。

我想为“结果”对象中的每个项目制作一个单独的 wordcloud：

sourcedata = {
    "results":
    [
        {
            "category":"spain", 
            "words":[["i", 190], ["the", 189], ["it", 139], ["you", 134], ["to", 133], ["a", 131]]
        },
        {
            "category":"england", 
            "words":[["lol", 37], ["on", 36], ["can", 35], ["do", 35], ["was", 33], ["mike", 33], ["but", 31], ["get", 30], ["like", 30]]
        },
        {
            "category":"france", 
            "words":[["ve", 18], ["make", 18], ["nick", 18], ["soph", 18], ["got", 18], ["he", 17], ["work", 17]]
        },
        {
            "category":"germany", 
            "words":[["about", 13], ["by", 13], ["out", 13], ["probabl", 13], ["how", 13], ["video", 12], ["an", 12]]
        }
    ]
}

由于每个 wordcloud 都需要它自己的布局模型，我尝试使用 forEach 循环遍历每个类别，为每个类别创建一个模型和“绘制”回调方法：

d3.json(sourcedata, function(error, data) {
    if (error) return console.warn(error);

    data = data.results;

    var number_of_charts = data.length;
    var chart_margin = 10;
    var total_width = 800;
    var chart_width_plus_two_margin = total_width/number_of_charts;
    var chart_width = chart_width_plus_two_margin - (2 * chart_margin);

    data.forEach(function(category) {

        svg = d3.select("body")
            .append("svg")
            .attr("id", category.name)
            .attr("width", (chart_width + (chart_margin * 2)))
            .attr("height", (chart_width + (chart_margin * 2)))
            .append("g")
            .attr("transform", "translate(" + ((chart_width/2) + chart_margin) + "," + ((chart_width/2) + chart_margin) + ")");

        d3.layout.cloud().size([chart_width, chart_width])
            .words(category.words.map(function(d) {
                return {text: d[0], size: 10 + (d[1] / 10)};
            })) 
            .padding(5)
            .rotate(function() { return ~~(Math.random() * 2) * 90; })
            .font("Impact")
            .fontSize(function(d) { return 10 + (d[1] * 10); })
            .on("end", drawInner)
            .start();

        function drawInner(words) {
            svg.selectAll("text").data(words)
            .enter().append("text")
            .style("font-size", function(d,i) { return d.size + "px"; })
            .style("font-family", "Impact")
            .style("fill", function(d, i) { return fill(i); })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
              return "translate(" + [d.x+(chart_width/2), d.y+(chart_width/2)] + ")rotate(" + d.rotate + ")";
            })
            .text(function(d) { return d.text; });
        }

    });

});

但是，当我运行它时，每个类别都有一组 svg/g 标签，但每个标签只包含一个文本标签，只有该类别中的一个单词，大小为 0。

非常感谢任何帮助，谢谢！

编辑：查看我自己的固定代码回复。感谢马克。

4

2 回答 2

3

盯着这个看太久了。问题是这一行：

.fontSize(function(d) { return 10 + (d[1] * 10); })

这里的 d 是从布局构造的对象，而不是您的数组条目。这无声无息地失败了。

将其替换为：

.fontSize(function(d) { return d.size; })

另外，检查你的翻译数学。它似乎正在将g元素移出svg.

这里的例子。

另一个潜在的陷阱是，由于它drawInner是一个回调，它似乎是以异步方式调用的。因此，您有可能svg通过多次调用来覆盖该变量drawInner。我会考虑将 svg 创建移动到回调内部。一种方法是：

...
.on("end", function(d, i) {
    drawInner(d, category.category);
  })
  .start();

function drawInner(words, name) {

  svg = d3.select("body")
  .append("svg")
  .attr("id", name)
...

这样您仍然可以传入类别名称。

更新示例。

于 2015-02-16T19:28:01.950 回答
0

感谢 Mark 的修复 - 这是工作代码：

d3.json('./resources/whatsappList.json', function(error, data) {
        if (error) return console.warn(error);

        var fill = d3.scale.category20();       //added missing fill scale

        data = data.results;

        var number_of_charts = data.length;
        var chart_margin = 10;
        var total_width = 800;
        var chart_width_plus_two_margin = total_width/number_of_charts;
        var chart_width = chart_width_plus_two_margin - (2 * chart_margin);

        data.forEach(function(category) {

            d3.layout.cloud().size([chart_width, chart_width])
                .words(category.words.map(function(d) {
                    return {text: d[0], size: 10 + (d[1] / 10)};
                })) 
                .padding(5)
                .rotate(function() { return ~~(Math.random() * 2) * 90; })
                .font("Impact")
                .fontSize(function(d) { return d.size; })       //fixed error on size
                .on("end", function(d, i) {
                    drawInner(d, category.category);
                 })
                .start();

            function drawInner(words, name) {
                svg = d3.select("body")
                .append("svg")
                .attr("id", name)
                .attr("width", (chart_width + (chart_margin * 2)))
                .attr("height", (chart_width + (chart_margin * 2)))
                .append("g")
                .attr("transform", "translate(0,0)") //neutralised pointless translation
                .selectAll("text").data(words)
                .enter().append("text")
                .style("font-size", function(d,i) { return d.size + "px"; })
                .style("font-family", "Impact")
                .style("fill", function(d, i) { return fill(i); })
                .attr("text-anchor", "middle")
                .attr("transform", function(d) {
                  return "translate(" + [d.x+(chart_width/2), d.y+(chart_width/2)] + ")rotate(" + d.rotate + ")";
                })
                .text(function(d) { return d.text; });
            }

        });

});
于 2015-02-16T19:48:07.500 回答