未捕获的SyntaxError：JSON输入的意外结束

时间：2017-02-14 09:24:25

标签： javascript php mysql json d3.js

我正在尝试根据输入

获得d3设计

MySQL表

value    id       name      parent
A         1        A         0
A         2        A1        1
A         3        A2        1
B         4        B         0
B         5        B1        4

php代码将mysql数据转换为json格式，以便在d3中使用

基于@ Z-BONE ANSWER的更新PHP和JSON结果

的index.php 

<?php

if(isset($_GET['input']))
{
$con=mysqli_connect("localhost","root","admin321","php");       

if (mysqli_connect_errno())                
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
   $name=$_GET['input'];
 $sql="SELECT * FROM tab where value LIKE '%".$name."%'";
$r = mysqli_query($con,$sql);
        $data = array();
        while($row = mysqli_fetch_assoc($r)) {
         $data[] = $row;
         }  
         function buildtree($src_arr, $parent_id = 0, $tree = array())
{
    foreach($src_arr as $idx => $row)
    {
        if($row['parent'] == $parent_id)
        {
            foreach($row as $k => $v)
                $tree[$row['id']][$k] = $v;
            unset($src_arr[$idx]);
            $tree[$row['id']]['children'] = buildtree($src_arr, $row['id']);
        }
    }
    ksort($tree);
    return $tree;
}

function insertIntoNestedArray(&$array, $searchItem){

    if($searchItem['parent'] == 0){
        array_push($array, $searchItem);
        return;
    }
    if(empty($array)){ return; }
 array_walk($array, function(&$item, $key, $searchItem){
    if($item['id'] == $searchItem['parent']){
            array_push($item['children'], $searchItem);
            return;
        }
        insertIntoNestedArray($item['children'], $searchItem);
}, $searchItem);
}
$nestedArray = array();
foreach($data as $itemData){

    $nestedArrayItem['id'] = $itemData['id'];
    $nestedArrayItem['name'] = $itemData['name'];
 $nestedArrayItem['parent'] = $itemData['parent'];
    $nestedArrayItem['children'] = array();

    insertIntoNestedArray($nestedArray, $nestedArrayItem);
}
   header('Content-Type: application/json');
 $json= json_encode($nestedArray);
echo $json ;

}
?>
PHP的json结果基于我的输入（B）

      [
      {
  "id":"4",
  "name":"B",
  "parent":"0",
  "children":[
     {
        "id":"5",
        "name":"B1",
        "parent":"4",
        "children":[

        ]
     }
  ]
  }
   ]

在更新PHP和JSON结果之前就像这里 - http://pastebin.com/409DfSuQ

我用过

        echo $json = substr($json, 1, -1);

这里，删除D3中的“无法读取foreach属性”的第一个和最后一个括号。

draw.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> draw</title>
</head>
<body>
<form name="vinform"method="get">
<input type="text" name="input">
<input type="submit" value="Show" id="display">
</form>
<div id="content">
</div>
</body>
</html>

如果我用

运行此代码 
<form name="vinform"method="get"action="index.php">

输出是一个有效的json ..我也尝试将这个json复制到一个单独的文件中并在d3中使用...这很好用...... 但问题是当我使用带有

的draw.html文件时 
<form name="vinform"method="get"action="index.html">

显示this 这个错误将我带到index.html的这一行

           d3.json("index.php", function(error,flare) {
          if (error) throw error;  //shows Unexpected end of json input

我的index.html 

    <!DOCTYPE html>
     <html>
    <head>
       <title>Radial Cluster Demo</title>
    <script src="//d3js.org/d3.v3.min.js"></script> 
     <style>
    .node {
        cursor: pointer;
    }
    .overlay {
        background-color:white;
    }
    .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 1.5px;
    }
    .node text {
         font: sans-serif;
        font-size: 80%;
        text-align: center;
    }
    .link {
        fill: none;   
    } 
    .parent{
    fill :red;
    }
    div#tooltip {   
        position: absolute;         
          font: 15px sans-serif;        
        background: orange; 
         border-radius: 8px;    
            padding-left: 5px;
            padding-right: 5px;
        pointer-events: none;           
    }

     </style>
        </head>

      <body>
     <div id="tooltip" style="display:none"></div>
    <div id="tree-container"class="full"></div>
    <script type="text/javascript">


    var selectedNode = null;
    var draggingNode = null;

    var panSpeed = 200;
    var panBoundary = 0; 

    var i = 0;
    var duration = 750;
    var root;

    var width = 5000;
    var height = 5000;

    var diameter = 750;

    var tree = d3.layout.tree().size([360, diameter / 2 - 120])

        .separation(function (a, b) {
        return (a.parent == b.parent ? 1 : 5) / a.depth;
    });
    var diagonal = d3.svg.diagonal.radial()

        .projection(function (d) {
        return [d.y, d.x / 180 * Math.PI];
    });


    d3.select(self.frameElement).style("height", width);



    function sortTree() {
        tree.sort(function (a, b) {
        return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
        });
    }
    sortTree();
    var baseSvg = d3.select("#tree-container").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "overlay")

     .attr("transform", "translate(" + 1000 + "," + 1000 + ")");


    function expand(d) {

        if (d._children) {
            d.children = d._children;
            d.children.forEach(expand);
            d._children = null;
        }
    }
    d3.json("index.php", function(error,flare) {
      if (error) throw error;

      root = flare;
      root.x0 = height / 2;
      root.y0 = 0;



    function collapse(d) {

        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }

    update(d);
    }
     flare.children.forEach(collapse);
      update(root);

    function toggleChildren(d) {

        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else if (d._children) {
            d.children = d._children;
            d._children = null;
        }
        return d;
    }


    function click(d) {

    if (!d.children) 
         root.children.forEach(collapse);
    //d.children = d._children;
    //    d._children = null;
        if (d3.event.defaultPrevented) return; 

        d = toggleChildren(d);

        update(d);


    }

    function update(source) {

        var levelWidth = [1];
        var childCount = function (level, n) {
            if (n.children && n.children.length > 0) {
    if (levelWidth.length <= level + 1) levelWidth.push(0);

                levelWidth[level + 1] += n.children.length;
                n.children.forEach(function (d) {
                    childCount(level + 1, d);
                });
            }
        };
        childCount(0, root);
         var nodes = tree.nodes(root); 
        links = tree.links(nodes);
        node = svgGroup.selectAll("g.node")
            .data(nodes, function (d) {
            return d.id || (d.id = ++i);
        });




        var nodeEnter = node.enter().append("g")
         .attr("class", "node")
        .on('click', click);

          nodeEnter.append("circle")
            .attr("class", "smallcircle")
                .style("stroke", function(d) { return d.color;});


        nodeEnter.append("text")
      .text(function (d) { return d.name;  })
         //   .style("font", "12px serif")
            .style("opacity", 1)
            .style("fill-opacity", 0)
            .on("mouseover", function (d) {
    var r = d3.select(this).node().getBoundingClientRect();
               d3.select("div#tooltip")
                    .style("display", "inline")
                   .style("top", (r.top-25) + "px")
                   .style("top", 10 + "px")
                .style("left", (d3.event.pageX) + "px")     
                    .style("top", (d3.event.pageY - 40) + "px") 
                  .style("left", r.left + 40+"px")
                  .style("left",  + "px")
                    .style("position", "absolute")
                   .text(d.t);
             })
        .on("mouseout", function(){
           d3.select("div#tooltip").style("display", "none")
       });


        node.select("circle.nodeCircle")
            .attr("r", 4.5)
   .style("fill", function (d) { return d._children ? "red" : "#fff"; });


                                //     });
         var nodeUpdate = node.transition()
            .duration(duration)
    .attr("transform", function (d) { return
   "rotate(" + (d.x - 90) + ")translate
   (" + d.y + ")rotate(" + (-d.x + 90) + ")"; });
      nodeUpdate.select("circle").attr("r", 4.5)

   .style("fill", function (d) {return d._children ? 
 "lightsteelblue" : "#fff";});

        nodeUpdate.select("text")
            .style("fill-opacity", 4)
       .attr("fill",function(d){return (d.children?"red":"black");})
        .attr("stroke-width",function(d)
    {return (d.children?"4":"1");})
         .attr("stroke-width",function(d)
       {return (d.children?"4 px":"1 px");})

        .attr("dy", ".35em")
            .attr("text-anchor", function (d) {
            return d.x < 180 ? "start" : "end";
        })


            .attr("transform", function (d) {
    return d.x < 180 ? "translate(8)" : "rotate(360)translate(-8)";
        });

        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function (d) {
            return "translate(" + source.x + "," + source.y + ")"; })
            .remove();

        nodeExit.select("circle")
            .attr("r", 0);

        nodeExit.select("text")
            .style("fill-opacity", 0);


        var link = svgGroup.selectAll("path.link")
            .data(links, function (d) {
            return d.target.id;
        })
    link.style("stroke", function(d) {
          return d.color;
        })

        link.enter().insert("path", "g")
            .attr("class", "link")
             link.style("stroke", function(d) {
          return d.target.color;
        })
            .attr("d", function (d) {
            var o = {
                x: source.x0,
                y: source.y0
            };
            return diagonal({
                source: o,
                target: o
            });
        });


        link.transition()
            .duration(duration)
            .attr("d", diagonal);


        link.exit().transition()
            .duration(duration)
            .attr("d", function (d) {
            var o = {
                x: source.x,
                y: source.y
            };
            return diagonal({
                source: o,
                target: o
            });
        })
            .remove();


        nodes.forEach(function (d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }
    });
    var svgGroup = baseSvg.append("g")
  .attr("transform", "translate(" + 550 + "," + 300 + ")");


    d3.selectAll("text").style("fill", function (d) 
   { return d3.select(this).classed(d.cond, true); });
     </script>
    </body>

    </html>

关于这个问题的任何想法???

1 个答案:

答案 0 :(得分：0)

在您的PHP文件中：

  1. 您正在使用HTML覆盖内容类型json ...删除此行header('Content-Type: text/html; charset=utf-8');并在其前面留下声明json的行...
  2. 另外，为什么要用这一行删除根括号：echo $json = substr($json, 1, -1);？它会使json无效..只需按原样回显JSON编码数组。
相关问题
最新问题