Javascript d3.json意外标记<；_Javascript_Php_Json_D3.js_Xampp

Javascript d3.json意外标记<；

javascript php json d3.js xampp

Javascript d3.json意外标记<；,javascript,php,json,d3.js,xampp,Javascript,Php,Json,D3.js,Xampp,我尝试使用php脚本生成json字符串并将其导入D3脚本，如下所示： <!DOCTYPE html> <meta http-equiv="content-type" content="text/html; charset=UTF8"> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1

我尝试使用php脚本生成json字符串并将其导入D3脚本，如下所示：

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<style>

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js" charset="urf-8"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("getneighborhood.php", function(error, graph) {
  if (error) throw error;

  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  node.append("title")
      .text(function(d) { return d.id; });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

</script>


.连接线{
行程：#999；
笔划不透明度：0.6；
}
.节点圆{
冲程：#fff；
笔划宽度：1.5px；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
json（“getneighborhood.php”，函数（错误，图形）{
如果（错误）抛出错误；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“r”，5）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
node.append（“标题”）
.text（函数（d）{返回d.id；}）；
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
函数勾选（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
节点
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
});
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}

GetNeighbor.php如下所示：

<?php
    error_reporting(E_ERROR|E_WARNING);
    // Create connection
    $con=mysqli_connect("localhost","****","****","****");
    // Check connection
    if (mysqli_connect_errno()) {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    $focusid = 5885;
    if (!isset($focusid)) { echo "no focusid"; die; }
    $links = array();
    $nodes = array();
    $result = $con->query("SELECT a.PersonID as ego, a.PersonID as source, b.PersonID as target FROM messagexperson a, messagexperson b WHERE a.PersonID = $focusid and a.PersonID <> b.PersonID AND a.MessageID = b.MessageID UNION SELECT a.PersonID as ego, b.PersonID as source, c.PersonID as target FROM messagexperson a, messagexperson b,messagexperson c WHERE a.PersonID = $focusid and a.PersonID <>  b.PersonID AND a.PersonID <> c.PersonID AND b.PersonID < c.PersonID AND a.MessageID = b.MessageID AND a.MessageID = c.MessageID AND b.MessageID = c.MessageID");
    $nodectr = 0;   
    while($row = $result->fetch_row()) {
        $from = $row[1];
        if (!isset($nodes[$from])) {
            $presult = $con->query("SELECT Name FROM person WHERE id = $from") or die(mysql_error());
            $temp = $presult->fetch_row();
            $nodes[$from]['name'] = $temp[0];
            $nodes[$from]['idx'] = $nodectr;
            $fromidx = $nodectr;
            $nodectr++;
        }
        else {
            $fromidx = $nodes[$from]['idx'];
        }
        $to = $row[2];
        if (!isset($nodes[$to])) {
            $presult = $con->query("SELECT Name FROM person WHERE id = $to") or die(mysql_error());
            $temp = $presult->fetch_row();
            $nodes[$to]['name'] = $temp[0];
            $nodes[$to]['idx'] = $nodectr;
            $toidx = $nodectr;
            $nodectr++;
        }
        else {
            $toidx = $nodes[$to]['idx'];
        }
        $data[$from][$to]++;
    }
    $nodectr = 0;
    foreach ($nodes as $id => $val) {
        $name = $val['name'];
        $d3['nodes'][$nodectr]['id'] = $name;
        $d3['nodes'][$nodectr]['group'] = 1;
        $nodectr++;
        $d3['nodes'];
    }
    $linkctr = 0;
    foreach ($data as $from => $list){
        $fromname = $nodes[$from]['name'];
        foreach ($list as $to => $count) {
            $toname = $nodes[$to]['name'];
            $d3['links'][$linkctr]['source'] = $fromname;
            $d3['links'][$linkctr]['target'] = $toname;
            $d3['links'][$linkctr]['value'] = 1;
            $linkctr++;
        }
    }    
    echo json_encode($d3);
    mysql_close($con);
?>

当我运行这个程序时，我会进入控制台（Chrome和Firefox也一样）：

mailgraph.htm:32未捕获的语法错误：JSON中位置2519处的意外标记<
在JSON.parse（）处
反对。（d3.v4.min.js:7）
在XMLHttpRequest.e（d3.v4.min.js:7）

有问题的行是“if（error）throw error”，点2519是json字符串的倒数第二个字符

当我将getNeighbor.php的输出保存为JSON文件并在d3.JSON函数中使用该文件时，脚本运行良好并生成预期的输出。我四处搜索，找到了一些建议，为html和.js指定UTF-8编码，正如您所看到的，我这样做了，但这并没有解决问题。PHP脚本正在XAMPP上运行，如果这很重要的话

你知道问题出在哪里吗

您的错误位于mailgraph.htm中的

json.parse（）

。而且你写的代码都没有关键字！？您的代码正在以某种方式向js发送HTML。这就是它抱怨

@AP的原因<代码>d3.json（“getneighborhood.php”

d3正在调用json。parse@Steve粘贴导航到

GetNeighbor.php

时得到的输出。简单的方法是在网页

window.location='GetNeighbor.php'

上的web控制台中键入此内容。然后右键单击并查看源代码！@AP我这样做了，但它抛出了一个错误“警告：mysql_close（）希望参数1是C:\xampp\htdocs\mail\bostock\getneighboratory.php第69行中给定的资源和对象”。应该是mysqli_close（$con）：-/感谢您的帮助！

mailgraph.htm:32 Uncaught SyntaxError: Unexpected token < in JSON at position 2519
    at JSON.parse (<anonymous>)
    at Object.<anonymous> (d3.v4.min.js:7)
    at XMLHttpRequest.e (d3.v4.min.js:7)