Question

我和其他人有同样的问题，但我从mssql＆amp;获得了json。 PHP。正如您所看到的，我已经在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 个答案: