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

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

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

现在我想从D3计数器调用和使用它的值来扩大我的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"

编辑:: 这里是我的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); 
?>

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

来源

2016-02-13 John Power

原因您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>

来源

2016-02-13 17:33:26 Mark

我正在使用这个作为我的域名'xScale.domain（[d3.min（data，xValue）-1，d3.max（data，xValue）+1]）; yScale.domain（[d3.min（data，yValue）-1，d3.max（data，yValue）+1]）;' –

@JohnPower，请参阅上面的编辑。 – Mark

实际上，您并未将变量d分配给任何全局范围变量，也不会将其分配给d3对象的成员。换句话说，d在每个（forEach）循环迭代中的console.log语句之后被释放，并且其值会丢失。

来源

2016-02-13 16:40:19

你应该首先检查你的服务“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的客户端代码，如果每次觉得OK，然后尝试“控制台。日志（d）“，然后尝试使用某些散列密钥。之后，你可以使用console.log（d ['SOME_KEY_WORD']）和“typeof”来查看你的写入类型，然后进行一些数学操作，但至少，没有你的php服务，你不能得到一个精确的回答，只是一些调试步骤和猜测。干杯。

来源

2016-02-13 16:42:37

我已经编辑了以上的帖子，包括我的PHP脚本希望我的问题会更加明朗 –

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

在PHP只echo写产值将没有帮助，因为我假设你正在呼吁将期待一个JSON的D3.json()。所以不喜欢它echo(json_encode($some_array));

然后console.log(data)，以确认您已经收到

来源

2016-02-13 16:50:46 user151496

我已经编辑了以上的帖子，包括我的PHP脚本，你可以指出我应该在脚本中做出改变？感谢您的回应！ –

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

回答

相关问题