javascript - 如何使用 ds.js 改进 D3noob 教程生成的图表-6ren

javascript - 如何使用 ds.js 改进 D3noob 教程生成的图表

转载作者：行者123 更新时间：2023-11-29 23:56:51

25

4

我已经能够使用 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/

25

4

0

文章推荐： android - 带有 "cordova-plugin-local-notifications"插件的本地通知

文章推荐： PHP 搜索 MySQL 数据库 - 多个搜索变量

文章推荐： php - 动态执行多个 $_FILES 时更改第一个输入字段名称

教程
我正在做一个关于代码学院的教程，我在这里收到一个错误，说“看起来你的函数没有返回‘唉，你没有资格获得信用卡。资本主义就是这样残酷。’”当收入参数为 75 时。”但是该字符串在控制台中返回(由于某种原因
Go 教程 : Channels, Buffered Channels 教程
我正在阅读 Go 的官方教程，但很难理解 Channel 和 Buffered Channels 之间的区别。教程的链接是 https://tour.golang.org/concurrency/2和
MSHTML 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
LinqPad 教程
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题？ Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
JavaSpaces 教程
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
iOS5高级编程书籍/教程
作为 iOS 新手，有大量书籍可以满足学习基础知识的需求。现在，我想转向一些高级阅读，例如 OAuth 和 SQLite 以及动态 API 派生的 TableView 等。您可以推荐任何资源吗？最佳
Selenium 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Android开源游戏引擎+教程
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
c - 教程
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 8 年前。
【教程】AWD中如何通过Python批量快速管理服务器？
前言很多同学都知道，我们常见的CTF赛事除了解题赛之外，还有一种赛制叫AWD赛制。在这种赛制下，我们战队会拿到一个或多个服务器。服务器的连接方式通常是SSH链接，并且可能一个战队可能会同时有
1、Memcached 教程
Memcached是一个自由开源的，高性能，分布式内存键值对缓存系统 Memcached 是一种基于内存的key-value存储，用来存储小块的任意数据（字符串、对象），这些数据可以是数据库调用、A
01、Perl 教程
Perl 又名实用报表提取语言，是 Practical Extraction and Report Language 的缩写 Perl 是由拉里·沃尔（Larry Wall）于19
01、WSDL 教程
WSDL 是 Web Services Description Language 的缩写，翻译成中文就是网络服务描述语言 WSDL 是一门基于 XML 的语言，用于描述 Web Services 以
Perl UMMF 教程？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
用于创建自定义用户控件的 WPF 教程
我正在寻找解释在 WPF 中创建自定义用户控件的教程。我想要一个控件，它结合了一个文本 block 、一个文本框和一个启动通用文件打开对话框的按钮。我已经完成了布局，一切都连接好了。它有效，但它是三
sdk - dynamodb 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Django 教程，后退按钮混淆
我接近 fourth page of the Django tutorial 的开始看着vote查看，最后是这样的: # Always return an HttpResponseRedirect a
emacs - ClojureBox 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Qt QSS 教程
是否有任何好的 Qt QSS 教程，或者在某个地方我可以看到样式小部件的示例？如果某处可用，我想要一些完整的引用。除了有关如何设置按钮或某些选项卡样式的小教程外，我找不到任何其他内容。最佳答案 Qt
ASP.NET 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he

首页

博学

6Ren·AI

商城

javascript - 如何使用 ds.js 改进 D3noob 教程生成的图表