Question

当你在将数据库连接到d3的php脚本中的sql查询中使用计数器时，如何调用该计数器以使用d3中存储的值？例如，我有查询

SELECT `ID_to`, count(*) as counter from `citations` group by `ID_to` ORDER BY counter desc

现在我想从d3调用counter并使用它的值在我的散点图上缩放我的y轴。当我只是使用它时它似乎不起作用，就好像它是表中的一列，即：

var yValue = function(d) { return d.counter;}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");

d3.json("connection2.php", function(error, data){
data.forEach(function(d) {
    d['ID_from'] =+d['ID_from']; 
    d['counter'] = +d['counter'];

     console.log(d);
    })

如何访问这些计数器值并在d3中使用它们？非常感谢任何帮助我对自己绕圈子感到非常沮丧。我得到的错误是：

Error: Invalid value for <circle> attribute cy="NaN"

EDIT :: 这是我的PHP脚本：

<?php
$username = "xxx"; 
$password = "xxx";   
$host = "xxx";
$database="xxx";

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

$myquery = "SELECT `ID_to`, count(*) as `counter` from `citations` group by `ID_to`";

$query = mysql_query($myquery);

if ( ! $query ) {
    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);
?>

我在浏览器中运行它并返回正确的结果。

Answer 1

cy="NaN"的原因是您没有分配domain to your scale。虽然range是图表的像素空间，但domain是数据中的值空间（值的范围）。您可以使用d3.extent获取数据集的最小值/最大值：

yScale = d3.scale
  .linear()
  .range([height, 0])
  .domain(
    d3.extent(data, function(d){ return d.counter; })
  );

我建议您花时间创建一个可重复的小问题示例。我尝试在下面这样做，但一切正常。

此外，在此语句d3.json("connection2.php", function(error, data){中，您没有处理错误，您确定您的JSON正确返回：

d3.json("connection2.php", function(error, data){
   if (error) throw error;

   console.log(data);

输出是什么？

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .dot {
    stroke: #000;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
  
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var yValue = function(d) {
        return d.counter;
      }, // data -> value
      yScale = d3.scale.linear().range([height, 0]), // value -> display
      yMap = function(d) {
        return yScale(yValue(d));
      }, // data -> display
      yAxis = d3.svg.axis().scale(yScale).orient("left");
      
    var xValue = function(d){
      return d.ID_from;
    },
    xScale = d3.scale.linear().range([0, width]), // value -> display
    xMap = function(d) {
        return xScale(xValue(d));
      }, // data -> display
    xAxis = d3.svg.axis().scale(xScale).orient("bottom");

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    var data = [{
      'ID_from': 1,
      'counter': parseInt(Math.random() * 100)
    }, {
      'ID_from': 2,
      'counter': parseInt(Math.random() * 100)
    }, {
      'ID_from': 3,
      'counter': parseInt(Math.random() * 100)
    }, {
      'ID_from': 4,
      'counter': parseInt(Math.random() * 100)
    }, {
      'ID_from': 5,
      'counter': parseInt(Math.random() * 100)
    }, {
      'ID_from': 6,
      'counter': parseInt(Math.random() * 100)
    }, {
      'ID_from': 7,
      'counter': parseInt(Math.random() * 100)
    }, {
      'ID_from': 8,
      'counter': parseInt(Math.random() * 100)
    }];

    data.forEach(function(d) {
      d.ID_from = +d.ID_from;
      d.counter = +d.counter;
    });

    xScale.domain([d3.min(data, xValue) - 1, d3.max(data, xValue) + 1]);
    yScale.domain([d3.min(data, yValue) - 1, d3.max(data, yValue) + 1]);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text");

    svg.selectAll(".dot")
      .data(data)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", xMap)
      .attr("cy", yMap);

  </script>

Answer 2

Actually you are not assigning variable d to any global-scope variabile neither to a member of d3 object. In other words d is deallocated just after your console.log statements at every (forEach) loop iteration and its value get lost.

Answer 3

你应该首先检查你的服务“connection2.php”，我们在这里不知道，你做了一些序列化，那里发生了什么 - 也许你在这里有问题。只需调试您的服务或使用“php connec .... php”执行它或使用echo "<pre>";MY PHP STUFF HERE; echo"</pre>"; in your script and call your URL, to see your output in a browser, are you get any results.

现在你可以尝试再次使用你的json-client代码，如果每个人都认为没问题，那么在你尝试使用一些哈希键之前尝试“console.log（d）”。之后你可以使用console.log（d ['SOME_KEY_WORD']）和“typeof”来看你得到写入类型，然后进行一些数学操作，但至少，没有你的php服务你就无法得到精确的回答，只是一些调试步骤和推测。欢呼声。

Answer 4

提供更多信息。如何从数据库查询中分配变量？如果在connection2.php中调用sql查询并将其结果分配给某个变量，那么我们称之为$some_array，（如$some_array=$some_db_handler->someQuery(..your query..));然后你应该将它写入输出。

在php中只用echo编写输出无济于事，因为我假设您调用的D3.json()将需要json。就像echo(json_encode($some_array));

一样

然后console.log(data)验证您收到的数据

d3 - 如何在php脚本中使用计数器中的值

4 个答案: