Question

我使用简单的d3.js折线图来显示MySQL数据库中的数据。当我从静态CSV中提取数据时，它工作正常，但现在我正在尝试将其连接到数据库，图表无法正确显示。

JS脚本：

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%e-%b-%y %H:%M").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom");

var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });

// Adds the svg canvas
var svg = d3.select("#air_temp_chart")
.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.csv("php/air_temperature_data.php", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    }

    var tickValues = data.map(function(d) { return d.date; });

    xAxis
    .tickValues(tickValues)
    .tickFormat(d3.time.format('%H:%M'));

    // 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; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

);

});

PHP数据文件：

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

$myquery = "SELECT  `date`, `close` FROM  `readings_air_temperature`";
$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);

＆GT;

PHP输出（JSON）：

[{"date":"1-May-12 06:00","close":"58.13"},{"date":"1-May-12 06:30","close":"53.98"},{"date":"1-May-12 06:30","close":"88.00"},{"date":"1-May-12 06:30","close":"101.29"}]

数据文件似乎没问题，但图表没有加载任何数据。相反，图表只显示没有任何标签或数据的x和y轴。

当我在浏览器中查看Inspector中的SVG输出时，这就是我得到的：

<svg height="270" width="600"><g transform="translate(50,30)"><path class="line"></path><g transform="translate(0,210)" class="x axis"><path d="M0,6V0H530V6" class="domain"></path></g><g class="y axis"><path d="M-6,0H0V210H-6" class="domain"></path></g></g></svg>

有人能指出我的错误吗？

Answer 1

data

这是一个同步问题。 function(error,data)只会在d3.csv回调（{{1}}位）内异步返回。然而，该程序调用d3.csv然后继续，就像数据立即可用一样。查看我添加到您的代码中的评论^^^

Edit2：这是一个d3.csv调用，我们需要d3.json，因为它的json会被返回！

d3.js没有从PHP文件

1 个答案: