D3 在回调期间为用户定义的输入获取 NULL
Posted
技术标签:
【中文标题】D3 在回调期间为用户定义的输入获取 NULL【英文标题】：D3 getting NULL for user-defined input during callback 【发布时间】：2015-01-23 12:38:13 【问题描述】：我有两个名为 startDate 和 endDate 的输入文本框，以及一个提交按钮。我在 php 中做了代码的后端，以便它从两个文本框中获取输入（日期），并在单击提交按钮后输出 D3 可以呈现的 JSON 文件。
问题是，我得到“Uncaught TypeError: Cannot read property 'length' of undefined”，但是当我手动输入 startDate 和 endDate 的值时（声明值而不是用户输入），它工作得很好.我猜测 sDate 和 eDate 的值在回调期间没有正确传递，这就是它返回 NULL 的原因。我不知道如何解决它。
在这里分享我的代码。
html：
<body>
<form id="user" action="#" method="post">
<table>
<tr>
<td>Start Date:</td>
<td><input id="start_date" type="text" name="startDate" value="" size="30" /> </td>
</tr>
<tr>
<td>End Date:</td>
<td> <input id="end_date" type="text" name="endDate" value="" size="30" /></td>
</tr>
</table>
<div id="submit_button">
<input type="reset" value="Clear" />
<input id="submitButton" type="submit" value="Submit" />
</div>
</form>
<div id="contents" style="width:500px; height:500px;"></div>
<!-- data should appear once Submit button is clicked -->
<script>
$(document).ready(function()
$('#submitButton').click (function(e)
e.preventDefault();
renderTable();
);
);
</script>
<!-- D3 -->
<script>
function renderTable()
d3.json("data.php", function(error, data)
var c_data = d3.select("#contents").append("svg")
.attr("width", 500)
.attr("height", 500)
var bars = c_data.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function(d)return d.value * 30)
.attr("height", 50)
.attr("y", function(d, i)return i * 80)
)
</script>
</body>
PHP：
<?php
$db = new PDO($hostname, $username,$password);
//$startDate = '2014-11-21'; --> works when this is used
//$endDate = '2014-11-23'; --> works when this is used
if(isset($_POST['startDate']))
$startDate = $_POST['startDate'];;
if(isset($_POST['endDate']))
$endDate = $_POST['endDate'];;
$statement = $db->prepare(*SQL statement edited out*);
$statement->execute(array($startDate, $endDate));
$jsonData=$statement->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($jsonData);
?>
附加信息：
我正在为 data.php 元素获取这个：
通知：未定义索引：/Applications/XAMPP/xamppfiles/htdocs/myProject/data.php 中的 startDate 注意：未定义索引：/Applications/XAMPP/xamppfiles/htdocs/myProject/data.php 中的 endDate []
【问题讨论】：
好吧，你不是POST表单，所以数据不会被发送。您可以将值作为参数添加到您调用的 URL 中，并通过 $_GET 查询它们。
嗨，@LarsKotthoff！我不确定我明白你的意思。你能提供一个更具体的例子吗？当我看到代码时，我学得最好。谢谢！
类似d3.json("data.php?startDate=" + startDate + "&endDate=" + endDate, function (...) ... )。
【参考方案1】：
表单通过 POST 或 GET 将输入值发送到服务器来工作。 （因此他们的方法属性）。
您正在尝试访问您的 php 代码中的 POST 变量，您实际上并没有发布表单。将变量放在 url 中可能更容易，如下所示：
d3.json("data.php?startDate=" + startDateValue + "&endDate=" + endDateValue, funct.....
POST 和 GET 之间的许多区别之一是 GET 通过 url 发送值，因此 php 代码的唯一区别是更改对 $startDate = $_GET['startDate']; 的访问权限
编辑：因为我意识到我基本上只是重复了 Lars Kotthoff 所说的，here is an interesting solution 使用 POST 而不是 GET，使用 xhr.send(method[, data][, callback])
【讨论】：
【参考方案2】：谢谢@LarsKotthoff 和@IgnacioAmpuero！我没有完全使用你建议的方法，但它确实帮助我理解了我所缺少的。
对于遇到同样问题的任何人，这就是我所做的：
使用 AJAX 请求填充我的查询。
var jsonData = $.ajax(
type: 'POST',
url: 'data.php',
dataType: 'json',
data: $('#user').serialize(),
async: false
).responseText;
将结果分配给数据。
var data = JSON.parse(jsonData_status);
然后用它来生成我的图表。
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
var bars = canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function(d)return d.value * 30)
.attr("height", 50)
.attr("y", function(d, i)return i * 80);
【讨论】：
以上是关于D3 在回调期间为用户定义的输入获取 NULL的主要内容，如果未能解决你的问题，请参考以下文章