Как отобразить два d3 wordclouds на одной странице

Question

Я пытаюсь поместить два (или даже больше ->, которые зависят от настроек пользователя) d3 Wordclouds на одну страницу. Однако я получаю следующий результат:

кажется, что список слов не будет анализироваться правильно.

Мой код выглядит следующим образом: (переменная 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(); 

Но я не могу его найти.

Answer 1

Вы перезаписать его из линии

d3.select(container).remove(); 

С d3 вы в основном создавать сложные SVGs на лету. Вы можете иметь столько элементов, сколько хотите. Пока вы их не удаляете, они останутся там. Но вам также нужно убедиться, что они не перекрываются. См. here и (очень круто!) here