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

我试图把两个（甚至更多 - >这取决于用户设置）d3 wordclouds到一个页面。不过，我会得到以下结果：如何在一个页面上显示两个d3 wordcloud

看来，这个词列表不会被解析正确。

我的代码如下所示：（PHP的$块变量指定的位置，在近期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();

但我无法找到它。

来源

2017-02-18 PM84

好吧，似乎问题是'var container =“svg _ <？php echo $ Block;？>”;'当我写'var container =“svg”;'一切工作都很好。但是，如果有两个或更多的wordcloud，容器将被覆盖，最后只会显示一个wordcloud（最后一个）。如何解决方法？ – PM84

您覆盖它，因为行

d3.select(container).remove();

随着D3你基本上是动态创建复杂SVGs的。你可以拥有任意数量的元素。只要你不删除它们，它们就会留在那里。但是你也需要确保它们不重叠。看到here和（非常酷！）here

来源

2017-02-19 20:48:33 jpmuc

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

回答

相关问题