Question

我试图将两个（甚至更多 - 依赖于用户设置的＆gt;）d3 Wordclouds放到一个页面上。但是，我会得到以下结果：

似乎单词列表不会被正确解析。

我的代码如下所示：（php $ Block变量指定了应该显示最近wordcloud的位置。）

var container = "svg_<?php echo $Block;?>";

var w = $('#word_cloud_<?php echo $Block;?>').width();
var h = w*0.75;

if($( window ).width()<400){
    var maxRange=20;
}else if($( window ).width()<800){
    var maxRange=40;
}else if($( window ).width()<1200){
    var maxRange=60;
}else if($( window ).width()>=1200){
    var maxRange=95;
}

var list_<?php echo $Block;?>=<?php echo $jsonWort; ?>;

var wordSize=12;
var layout;

generate_<?php echo $Block;?>(list_<?php echo $Block;?>);

function generate_<?php echo $Block;?>(list) {

    //Blacklist wird gefiltert!
    var blacklist=["ein","sind"];
    list=list.filter(function(x) { return blacklist.indexOf(x) < 0 });

    // Liste wird verarbeitet
    result = { };
    for(i = 0; i < list.length; ++i) {
        if(!result[list[i]])
            result[list[i]] = 0;
        ++result[list[i]];
    }

    var newList = _.uniq(list);



    var frequency_list = [];
    var len = newList.length;
    for (var i = 0; i < len; i++) {

        var temp = newList[i];
        frequency_list.push({
            text : temp,
            freq : result[newList[i]],
            time : 0 
        });

    }
    frequency_list.sort(function(a,b) { return parseFloat(b.freq) - parseFloat(a.freq) } );  


    for(var t = 0 ; t < len ; t++)
    {
        var addTime = (100 * t) +500;
        frequency_list[t].time=addTime;
    }


    for(i in frequency_list){
        if(frequency_list[i].freq*wordSize > 160)   
            wordSize = 3;
    }


    var sizeScale = d3.scale.linear().domain([0, d3.max(frequency_list,  function(d) { return d.freq} )]).range([5, maxRange]);
    layout= d3.layout.cloud().size([w, h])
        .words(frequency_list)
        .padding(5)
        .rotate(function() { return ~~(Math.random() * 2) * 90; })
        .font("Impact")
        .fontSize(function(d) { return sizeScale(d.freq); })
        .on("end",draw)
        .start();
}


function draw(words) {

    var fill = d3.scale.category20();

    d3.select(container).remove();

    d3.select("#word_cloud_<?php echo $Block;?>").append(container)
        .attr("width", w)
        .attr("height", h) 
        .append("g")
        .attr("transform", "translate(" + [w/2, h/2] + ")")
        .selectAll("text")
        .data(words)
        .enter().append("text")

        .transition()
        .duration(function(d) { return d.time}  )
        .attr('opacity', 1)
        .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")
        .attr("transform", function(d) {
        return "rotate(" + d.rotate + ")";
    })
        .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    })
        .text(function(d) { return d.text; });
}

我认为错误必须在

的某个地方

   var sizeScale = d3.scale.linear().domain([0, d3.max(frequency_list,  function(d) { return d.freq} )]).range([5, maxRange]);
layout= d3.layout.cloud().size([w, h])
    .words(frequency_list)
    .padding(5)
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .font("Impact")
    .fontSize(function(d) { return sizeScale(d.freq); })
    .on("end",draw)
    .start();

但我无法找到它。

Answer 1

由于行

而覆盖它

d3.select(container).remove();

使用d3，您基本上可以动态创建复杂的SVG。您可以拥有任意数量的元素。只要你不删除它们，它们就会留在那里。但是你还需要确保它们不重叠。请参阅here和（非常酷！）here

如何在一个页面上显示两个d3 wordcloud

1 个答案: