在同一頁面上的多動態d3圖表

Question

我嘗試用php foreach顯示幾個d3 flare氣泡圖表。我使用每個變種獨特但沒有任何結果。如果我有數組這是工作數據的唯一一個領域，但更多的是失敗......

與DATAS

$d3array = array('sitewebfonctionmanquante' => $sitewebfonctionmanquante,'aimerezsiteweb' => $aimerezsiteweb); 

與信息D3圖表腳本中的數組：

<script>var sitewebfonctionmanquante = '{"name": "citation", "children": [{"name": "RECHERCHE", "size": 25},{"name": "QUESTIONS", "size": 18},{"name": "CRIDON", "size": 15},{"name": "REPONSES", "size": 13},{"name": "MOTEUR", "size": 11},{"name": "POSEES", "size": 11},{"name": "ACCES", "size": 9},{"name": "N", "size": 7},{"name": "BASE", "size": 7},{"name": "ECRITES", "size": 7},{"name": "SITE", "size": 6},{"name": "THEMES", "size": 4},{"name": "REPONSE", "size": 4},{"name": "PAS", "size": 4},{"name": "Y", "size": 4},{"name": "LES", "size": 4},{"name": "CONSULTATION", "size": 3},{"name": "ON", "size": 3},{"name": "AI", "size": 3},{"name": "QUESTION", "size": 3},{"name": "DOCUMENTATION", "size": 3},{"name": "CONSULTE", "size": 3},{"name": "COMME", "size": 3},{"name": "BA", "size": 3},{"name": "PROBLEME", "size": 3},{"name": "ENSEMBLE", "size": 3},{"name": "FONCTION", "size": 3},{"name": "..", "size": 3},{"name": "CAHIERS", "size": 3},{"name": "TITRE", "size": 3},{"name": "ETU", "size": 3},{"name": "CONFRERES", "size": 3},{"name": "RETROUVER", "size": 3},{"name": "MAN", "size": 3},{"name": "PARIS", "size": 3},{"name": "JA", "size": 2},{"name": "FORMATIONS", "size": 2},{"name": "AVOIR", "size": 2},{"name": "QUESTIONS/REPONSES", "size": 2},{"name": "PERFORMANT", "size": 2},{"name": "CETTE", "size": 2},{"name": ".", "size": 2},{"name": "SEMBLE", "size": 2},{"name": "TROUVE", "size": 2},{"name": "BULLETIN", "size": 2},{"name": "TEMPS", "size": 2},{"name": "FAUDRAIT", "size": 2},{"name": "ACCESSIBLE", "size": 2},{"name": "NEANT", "size": 2},{"name": "QU", "size": 2},{"name": "MEME", "size": 2},{"name": "SON", "size": 2},{"name": "FAITES", "size": 2},{"name": "RECHERCHES", "size": 2},{"name": "AUCUNE", "size": 2},{"name": "C", "size": 2},{"name": "EST", "size": 2},{"name": "INFORMATIONS", "size": 2},{"name": "PUBLICATION", "size": 2},{"name": "ASSURANCE", "size": 2},{"name": "MATIERE", "size": 2},{"name": "T", "size": 2},{"name": "RAS", "size": 2},{"name": "LA", "size": 2},{"name": "LYON", "size": 2},{"name": "POSE", "size": 2},{"name": "VIE", "size": 2},{"name": "PUISSANT", "size": 2},{"name": "ACTUALITE", "size": 2},{"name": "CONSULTER", "size": 2},{"name": "GLOBALE", "size": 2},{"name": "EFFICACE", "size": 2},{"name": "DIFFICILE", "size": 2},{"name": "RAPPORT", "size": 2},{"name": "CLES", "size": 2},{"name": "ECRITE", "size": 2},{"name": "MOTS", "size": 2},{"name": "LE", "size": 2} 

<script>var aimerezsiteweb = '{"name": "citation", "children": [{"name": "CALCUL", "size": 3},{"name": "PERMETTANT", "size": 3},{"name": "COMPRENDRE", "size": 2},{"name": "DIRECTEMENT", "size": 2},{"name": "DIVERS", "size": 2},{"name": "CALCULS", "size": 3},{"name": "FISCALITE", "size": 2},{"name": "ACTUELLE", "size": 2},{"name": "DOMMAGE", "size": 2},{"name": "AVOIR", "size": 6},{"name": "ACTUALITE", "size": 2},{"name": "JURIDIQUE", "size": 7},{"name": "TEMPS", "size": 4},{"name": "TROUVER", "size": 2},{"name": "DOCUMENTATION", "size": 7},{"name": "/", "size": 3},{"name": "MO", "size": 4},{"name": "CLAUSES", "size": 3},{"name": "EGALEMENT", "size": 3},{"name": "POUVOIR", "size": 3},{"name": "POSER", "size": 6},{"name": "QUESTIONS", "size": 20},{"name": "COMPTE", "size": 5},{"name": "ETU", "size": 3},{"name": "FAIRE", "size": 3},{"name": "PROFITER", "size": 2},{"name": "ENSEMBLE", "size": 4},{"name": "MAN", "size": 2},{"name": "QU", "size": 4},{"name": "CAHIERS", "size": 2},{"name": "CRIDON", "size": 14},{"name": "ACQUISITION", "size": 2},{"name": "USUFRUIT", "size": 2},{"name": "DROITS", "size": 5},{"name": "NOUS", "size": 2},{"name": "SOUVENT", "size": 2},{"name": "DONT", "size": 2},{"name": "SI", "size": 3},{"name": "FRAIS", "size": 2},{"name": "VENTE", "size": 2},{"name": ".", "size": 2},{"name": "POINTS", "size": 2},{"name": "TABLE", "size": 3},{"name": "TYPE", "size": 3},{"name": "PRATIQUE", "size": 3},{"name": "DOSSIERS", "size": 2},{"name": "ACCES", "size": 12},{"name": "BASE", "size": 8},{"name": "DONNEES", "size": 4},{"name": "POSEES", "size": 7},{"name": "CONSULTER", "size": 4},{"name": "REPONSES", "size": 17},{"name": "QUESTIONS,", "size": 3},{"name": "AUTRES", "size": 2},{"name": "COMME", "size": 4},{"name": "BA", "size": 3},{"name": "N", "size": 4},{"name": "NOTAMMENT", "size": 2},{"name": "JA", "size": 4},{"name": "THEMES", "size": 4},{"name": "EXEMPLE", "size": 3},{"name": "SUJETS", "size": 2},{"name": "CHAT", "size": 2},{"name": "QUESTION", "size": 5},{"name": "MOTEUR", "size": 6},{"name": "RECHERCHE", "size": 11},{"name": "APPORTEES", "size": 2},{"name": "MES", "size": 4},{"name": "AUSSI", "size": 2},{"name": "S", "size": 3},{"name": "DIRECT", "size": 2},{"name": "CI", "size": 3},{"name": "SSUS", "size": 3},{"name": "VEILLE", "size": 6},{"name": "MA", "size": 2},{"name": "AINSI", "size": 2},{"name": "ACCESSIBLE", "size": 2},{"name": "ECRITES", "size": 5},{"name": "RAS", "size": 2},{"name": "I", "size": 5},{"name": "M", "size": 6},{"name": "POURQUOI", "size": 2},{"name": "REVUES", "size": 2},{"name": "BOR", "size": 2},{"name": "MEILLEUR", "size": 2},{"name": "BASES", "size": 3},{"name": "PRATIQUES", "size": 3},{"name": "PIECES", "size": 2},{"name": "AVONS", "size": 2},{"name": "CERTAINES", "size": 2},{"name": "CONSEILS", "size": 2},{"name": "LOIS", "size": 2},{"name": "DONNEE", "size": 2},{"name": "..", "size": 2},{"name": "FICHES", "size": 2},{"name": "AFIN", "size": 2},{"name": "LYON", "size": 3},{"name": "ARTICLES", "size": 2},{"name": "C", "size": 2},{"name": "EST", "size": 3},{"name": "CES", "size": 2},{"name": "COUVRIR", "size": 2},{"name": "AI", "size": 2},{"name": ",", "size": 3},{"name": "MEME", "size": 2},{"name": "CEUX", "size": 2},{"name": "VOUS", "size": 2},{"name": "POURRIEZ", "size": 2},{"name": "CHAQUE", "size": 2},{"name": "SITE", "size": 3},{"name": "HABITU", "size": 2},{"name": "SERAIT", "size": 2},{"name": "CONSULTATIONS", "size": 4},{"name": "CREATION", "size": 2},{"name": "LA", "size": 2},{"name": "NOTAIRE", "size": 3},{"name": "CONFRERES", "size": 3},{"name": "JOUR", "size": 3},{"name": "PLUS", "size": 3},{"name": "RNIERES", "size": 2},{"name": "PUBLICS", "size": 2},{"name": ">", "size": 4},{"name": "CONTRAT", "size": 2},{"name": "POSSIBILITE", "size": 2},{"name": "CRIDON,", "size": 2},{"name": "RECUE", "size": 2},{"name": "VALUES", "size": 2}]}'</script> 

而且PHP代碼：

<?php 
     foreach($d3array as $d3key => $d3){ 
?> 
<script> 
var diameter = 960, 
    format = d3.format(",d"), 
    color = d3.scale.category20c(); 

var bubble = d3.layout.pack() 
    .sort(null) 
    .size([diameter, diameter]) 
    .padding(1.5); 

var <?php echo $d3key; ?>_svg = d3.select("#<?php echo $d3key; ?>_d3").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .attr("class", "bubble"); 

<?php echo $d3key; ?>_root = JSON.parse(<?php echo $d3key; ?>);  
    var <?php echo $d3key; ?>_node = <?php echo $d3key; ?>_svg.selectAll(".node") 
     .data(bubble.nodes(classes(<?php echo $d3key; ?>_root)) 
     .filter(function(d) { return !d.children; })) 
    .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    <?php echo $d3key; ?>_node.append("title") 
     .text(function(d) { return d.packageName + " => " + d.className + ": " + format(d.value) + " citations"; }); 

    <?php echo $d3key; ?>_node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .style("fill", function(d) { return color(d.packageName); }); 

    <?php echo $d3key; ?>_node.append("text") 
     .attr("dy", ".3em") 
     .style("text-anchor", "middle") 
     .text(function(d) { return d.className.substring(0, d.r/3); }); 

// Returns a flattened hierarchy containing all leaf nodes under the root. 
function classes(root) { 
    var classes = []; 

    function recurse(name, node) { 
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
    else classes.push({packageName: name, className: node.name, value: node.size}); 
    } 

    recurse(null, root); 
    return {children: classes}; 
} 

d3.select(self.frameElement).style("height", diameter + "px"); 
</script>   
<?php 
     } 
?> 

Answer 1

問題是不是在D3的代碼，但這個代碼來生成數據來源：

foreach($d3array as $d3key => $d3){ 
    //print_r($d3); 
    $k = 0; 
    echo '<script>var '.$d3key.' = \'{"name": "citation", "children": ['; 
    foreach($d3 as $key => $value){ 

    if($value > 1){  
     if($k == 0){ 
        echo '{"name": "'.$key.'", "size": '.$value.'}'; 
       } else { 
        echo ',{"name": "'.$key.'", "size": '.$value.'}'; 
       } 
     $k++; 
    }  
}  
//print_r($key2); 

} 
echo ']}\'</script>'; 

事實上結束代碼的腳本是在foreach外......好代碼是在這裏：

foreach($d3array as $d3key => $d3){ 
    //print_r($d3); 
    $k = 0; 
    echo '<script>var '.$d3key.' = \'{"name": "citation", "children": ['; 
    foreach($d3 as $key => $value){ 

    if($value > 1){  
     if($k == 0){ 
        echo '{"name": "'.$key.'", "size": '.$value.'}'; 
       } else { 
        echo ',{"name": "'.$key.'", "size": '.$value.'}'; 
       } 
     $k++; 
    }  
}  
//print_r($key2); 
echo ']}\'</script>'; 

} 

感謝user2356315看到這個錯誤