同一页面上的多动态 d3 图表答案

【问题标题】：Multi dynamics d3 charts on a same page同一页面上的多动态 d3 图表
【发布时间】：2014-12-03 18:03:08
【问题描述】：

我尝试使用 php foreach 显示几个 d3 耀斑气泡图。我使用使每个 var 唯一但没有任何结果。如果我的数组只有一个数据字段，这是可以工作的，但如果有更多，它会失败......

包含数据的数组

$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
        }
?>

【问题讨论】：

你意识到你粘贴的代码缺少一个结束的''标签吗？事实上，在 d3 图表的数据中间，该对象甚至没有用单引号/分号等关闭
可耻的是我使用代码来生成源代码并且我在结束的脚本标签之外。感谢您的观察，我花了 2 个小时才找到 d3.js 代码的错误....

标签： javascript php d3.js

【解决方案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 看到这个错误

【讨论】：