d3.js在变换行中给出NAN

Question

我遇到了和其他人一样的问题，但是我从mssql和php得到了json。 正如您所看到的，我已经在PHP代码中预先格式化了日期，因此没有空格或时间组件。

错误： g transform="translate(50,30)"> <path class="line" d="MNaN,253.76088692807969LNaN,250.9306659567185LNaN,228.0394021222379LNaN,236.55345529228308LNaN,250.3926900696003LNaN,253.2852850568592LNaN,235.5710645418933LNaN,207.47936713193624LNaN,71.30129692313542LNaN,79.92450462100177LNaN,0LNaN,7.835735747157017">

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title><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>
<!-- load the d3.js library -->    
</head>
<body>
<!-- load the d3.js library -->    
<script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

<script>

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

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").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").ticks(5);

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.TheDate); })
    .y(function(d) { return y(d.Lines); });

// Adds the svg canvas
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("data3.php", function(error, data) {

    data.forEach(function(d) {
        d.TheDate = parseDate(d.TheDate);
        d.Lines = +d.Lines;
    });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.TheDate; }));
    y.domain([0, d3.max(data, function(d) { return d.Lines; })]);

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

});

</script>
</body>
</html>

PHP代码：

    <?php
$conn = mssql_connect("server", "user", "password");
if (!$conn)
    die('Unable to connect!');
if (!mssql_select_db('asiids01', $conn))
    die('Unable to select database!');

$result1 = mssql_query("SET ANSI_NULLS ON;");
$result2 = mssql_query("SET ANSI_WARNINGS ON;"); 


$SQL = "SELECT Games,Lines,Contest,ContestantLines,Date FROM database.dbo.Ext_tbGameAndContestControl with(nolock)";

// Execute query:
$qresult = mssql_query($SQL) 
    or die('A error occured: ' . mssql_get_last_message());

$json = array();
$json_arr = array();

while ($row = mssql_fetch_array($qresult)) {
        $phpdate = strtotime( $row['Date'] );
        $json['TheDate'] = date('m-d-Y',$phpdate);;
        //$json['Games'] = $row['Games'];
        $json['Lines'] = $row['Lines'];
        //$json['Contest'] = $row['Contest'];
        //$json['ContestantLines'] = $row['ContestantLines'];
        array_push($json_arr,$json);

}
echo json_encode($json_arr);
mssql_free_result($qresult);
mssql_close($conn); // close connection
?>

php的实际json输出：

[{"Date":"05-09-2017","Lines":20039},{"Date":"05-09-2017","Lines":20402},{"Date":"05-10-2017","Lines":23338},{"Date":"05-10-2017","Lines":22246},{"Date":"05-11-2017","Lines":20471},{"Date":"05-11-2017","Lines":20100},{"Date":"05-12-2017","Lines":22372},{"Date":"05-12-2017","Lines":25975},{"Date":"05-13-2017","Lines":43441},{"Date":"05-13-2017","Lines":42335},{"Date":"05-14-2017","Lines":52586},{"Date":"05-14-2017","Lines":51581}]

任何人都可以看到我的错误在哪里？ 谢谢

Answer 1

您的时间格式不正确。 在D3说明符中， b是缩写的月份名称， y是没有世纪的年份。

因此，由于您的日期键/值对是这样的...

"Date":"05-09-2017"

......这应该是你的说明者：

var parseDate = d3.time.format("%m-%d-%Y").parse;

这是您更新的代码：

 var data = [{ "Date": "05-09-2017", "Lines": 20039 }, { "Date": "05-09-2017", "Lines": 20402 }, { "Date": "05-10-2017", "Lines": 23338 }, { "Date": "05-10-2017", "Lines": 22246 }, { "Date": "05-11-2017", "Lines": 20471 }, { "Date": "05-11-2017", "Lines": 20100 }, { "Date": "05-12-2017", "Lines": 22372 }, { "Date": "05-12-2017", "Lines": 25975 }, { "Date": "05-13-2017", "Lines": 43441 }, { "Date": "05-13-2017", "Lines": 42335 }, { "Date": "05-14-2017", "Lines": 52586 }, { "Date": "05-14-2017", "Lines": 51581 }]; var margin = { top: 30, right: 20, bottom: 30, left: 50 }, width = 800 - margin.left - margin.right, height = 470 - margin.top - margin.bottom; // Parse the date / time var parseDate = d3.time.format("%m-%d-%Y").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").ticks(5); 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.Lines); }); // Adds the svg canvas 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 + ")"); data.forEach(function(d) { d.Date = parseDate(d.Date); d.Lines = +d.Lines; }); // 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.Lines; })]); // 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);

 path { fill: none; stroke: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

PS：你的数据数组中没有theDate ，而是Date 。 我也改变了。

d3.js在变换行中给出NAN

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-15 00:37:24

d3.js在变换行中给出NAN

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-15 00:37:24

解决方案1
0 已采纳 2017-05-15 00:37:24