MySQL来JSON到D3js没有Visual ......“下课”的识别错误

Question

新建D3 ......

我试图复制一个simple example但是从MySQL我的数据。由于我将我的列重命名为“名称”和“大小”，它应该是一个简单的过渡。我认为该行/项目!d.children;限制了要处理的数据或者我的代码出现了错误。

我怎么能一个类添加到现有的以.json？

或

我需要删除哪些代码才能使现有的.json正常工作？

<script src="http://d3js.org/d3.v3.min.js"></script> 
<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 svg = d3.select("body").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .attr("class", "bubble"); 

d3.json("json.php", function(error, root) { 
    var node = svg.selectAll(".node") 
     .data(bubble.nodes(classes(root)) 
     .filter(function(d) { return !d.children; })) 
.enter().append("g") 
    .attr("class", "node") 
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    node.append("title") 
     .text(function(d) { return d.className + ": " + format(d.value); }); 

    node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .style("fill", function(d) { return color(d.packageName); }); 

    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> 

json.php

<?php 
$username = "homedbuser"; 
$password = "homedbuser"; 
$host = "localhost"; 
$database="homedb"; 

$server = mysql_connect($host, $username, $password); 
$connection = mysql_select_db($database, $server); 

$myquery = " 
SELECT `name`, `size` FROM `lists` 
"; 
    $query = mysql_query($myquery); 

    if (! $myquery) { 
     echo mysql_error(); 
     die; 
    } 

    $data = array(); 

    for ($x = 0; $x < mysql_num_rows($query); $x++) { 
     $data[] = mysql_fetch_assoc($query); 
    } 

    echo json_encode($data);  

    mysql_close($server); 
?> 

此外，我认为这是在脚本root错误（被假设是数据）。我将继续用我的研究来更新代码，直到得到答复。

Answer 1

您尝试的图表要求数据采用分层格式。通过查询，您已经看到数据似乎不在层次结构中。

我已经使用了csv数据，但没关系，我给出了我用于链接中给出的图表的格式。

编写您的SQL查询以获取以下格式的数据并使用d3.json并导入php文件，一切都应该正常工作。

我粘贴了所有的代码和示例数据。

这可能会帮助你。任何问题都请提供样本数据。

数据：

 

    name,size 
    level1,23 
    level1,23 
    level1,23 
    level1,23 
    level1,23 
    level1,23 
    level1,23 
    level1,23 
    level1,23 
    level2,23 
    level2,23 
    level2,23 
    level2,23 
    level2,23 
    level2,23 
    level2,23 
    level2,23 
    level2,23 

功能用于转换到层次：通过结合功能

 

    d3.csv("data.csv", function(root) { 

       var newData = { name :"root", children : [] }, 
        levels = ["name"]; 

       // For each data row, loop through the expected levels traversing the output tree 
       root.forEach(function(d){ 
        // Keep this as a reference to the current level 
        var depthCursor = newData.children; 
        // Go down one level at a time 
        levels.forEach(function(property, depth){ 

         // Look to see if a branch has already been created 
         var index; 
         depthCursor.forEach(function(child,i){ 
          if (d[property] == child.name) index = i; 
         }); 
         // Add a branch if it isn't there 
         if (isNaN(index)) { 
          depthCursor.push({ name : d[property], children : []}); 
          index = depthCursor.length - 1; 
         } 
         // Now reference the new child array as we go deeper into the tree 
         depthCursor = depthCursor[index].children; 
         // This is a leaf, so add the last element to the specified branch 
         if (depth === levels.length - 1) depthCursor.push({ name : d.name, size : d.size }); 
        }); 
       }); 

       //Print what we've got 
       d3.select('body').append('pre') 
          .text(JSON.stringify(newData, null, ' ')); 
      }) 

脚本：

 

    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 svg = d3.select("body").append("svg") 
     .attr("width", diameter) 
     .attr("height", diameter) 
     .attr("class", "bubble"); 

    d3.json("yourphpfile.php", function(error, data) { 
     var root = { name :"root", children : [] }, 
        levels = ["name"]; 

       // For each data row, loop through the expected levels traversing the output tree 
       data.forEach(function(d){ 
        // Keep this as a reference to the current level 
        var depthCursor = root.children; 
        // Go down one level at a time 
        levels.forEach(function(property, depth){ 

         // Look to see if a branch has already been created 
         var index; 
         depthCursor.forEach(function(child,i){ 
          if (d[property] == child.name) index = i; 
         }); 
         // Add a branch if it isn't there 
         if (isNaN(index)) { 
          depthCursor.push({ name : d[property], children : []}); 
          index = depthCursor.length - 1; 
         } 
         // Now reference the new child array as we go deeper into the tree 
         depthCursor = depthCursor[index].children; 
         // This is a leaf, so add the last element to the specified branch 
         if (depth === levels.length - 1) depthCursor.push({ name : d.name, size : d.size }); 
        }); 
       }); 


     var node = svg.selectAll(".node") 
      .data(bubble.nodes(classes(root)) 
      .filter(function(d) { return !d.children; })) 
     .enter().append("g") 
      .attr("class", "node") 
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

     node.append("title") 
      .text(function(d) { return d.className + ": " + format(d.value); }); 

     node.append("circle") 
      .attr("r", function(d) { return d.r; }) 
      .style("fill", function(d) { return color(d.packageName); }); 

     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");