如何使用ds.js改进d3nob 's教程生成的图表

How to improve chart generated from D3noob's tutorial using ds.js

本文关键字：教程 ds 何使用 js 改进 d3nob      更新时间：2023-09-26

我已经能够使用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);
?>

simple-graph.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>

问题:我想做的就是生成与教程中类似的图形。我能够生成一个图表，但不是显示4月4月08日4月15日4月22日4月29日(如http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html所示)沿着x轴，它显示4月7日10月2013年4月，这使得图表看起来不同。

谢谢。露丝。

如果你的图表底部显示的日期范围显示的是4月7月10月2013年4月，这将表明你的数据库中的数据具有比教程中的示例数据大得多的日期范围。

d3.js在调整轴值以适应数据方面非常聪明，所以如果您看到从4月(我假设是2012年)到2013年4月的范围，这将表明您的数据超出了该范围。(示例中的数据范围为2012年3月27日至2012年5月1日)。

检查你的数据，看看是否有错别字。

编辑:2014-08-15

另一个你遇到的图形看起来奇怪和块状的问题是因为<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变得糟糕的例子非常像你的!)

相关文章：