我已经能够使用 D3noob 的教程 ( http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html ) 创建图表，但生成的图表与教程中的不同。
下面是示例和我生成的示例的图形表示。
我现在要添加所有源代码(data2.php 和 simple-graph.html)，如下所示:
data2.php
<?php
$username = "homedbuser";
$password = "homedb";
$host = "localhost";
$database="homedb";
$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);
$myquery = "SELECT `date`, `close` FROM `data2`";
$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);
?>
简单图.html
<!DOCTYPE html>
<style>
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 20, bottom: 30, left: 50}, //{top: 30, right: 20, bottom: 30, left: 50},
width = 1000 - margin.left - margin.right, //width = 600 - margin.left - margin.right,
height = 470 - margin.top - margin.bottom; //height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
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 + ")");
// Get the data
d3.json("data2.php", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
svg.append("path") // Add the valueline path.
.attr("class", "line")
.attr("d", valueline(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
问题:我想做的就是生成类似于教程中的图表。我能够生成一个图表，但不是沿 x 轴显示 April April 08 April 15 April 22 April 29 (如 http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html 所示)，而是显示 April July October 2013 April，这使得图表看起来有所不同。
谢谢。 露丝。
最佳答案
如果图表底部的日期范围显示 2013 年 4 月 7 月 10 月，则表明数据库中的数据的日期范围比教程中的示例数据大得多。
d3.js 在调整轴值以适应数据方面非常聪明，因此如果您看到从 4 月(我假设是 2012 年)到 2013 年 4 月的范围，则表明您的数据超出了该范围。 (示例中的数据范围为2012年3月27日至2012年5月1日)。
检查您的数据并查看其中是否存在拼写错误。
编辑:2014-08-15
您遇到的图表看起来奇怪且 block 状的另一个问题是因为 <style>信息不在您的 html 代码中。
如果您查看 simple-graph.html 代码(来自提供的下载或此处有一个实例 http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5 )，您应该在开头看到以下部分；
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
添加这个，它应该会有所改善。读一读这本书( https://leanpub.com/D3-Tips-and-Tricks )，尤其是开头的 CSS 部分，它将解释您所看到的内容(事实上，CSS 变得令人讨厌的一些示例与您的非常相似!)
关于javascript - 如何使用 ds.js 改进 D3noob 教程生成的图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25285376/