当我尝试运行此代码snipet时,我收到了错误 错误:
Invalid value for <path> attribute d="MNaN,533.3333333333333LNaN,533.3333333333333LNaN,533.3333333333333LNaN,533.3333333333333". error is for parsing the date.
Json数据:
[{
"Date": "2016-03-03",
"Rank": 1,
"Accession": "00005768-201305001-00045"
}, {
"Date": "2016-03-11",
"Rank": 1,
"Accession": "00005768-201305001-00045"
}]
Javascript:
$(document).ready(function() {
jsondatafun();
});
function jsondatafun() {
var combinedData = {
RowKey: rowKey,
DataType: dataType
}
$.ajax({
type: "GET",
url: '/Home/RankLineJsonResult',
data: combinedData,
contentType: "application/json",
dataType: "json"
}).success(function(data) {
plotChart(data);
})
}
function plotChart(data) {
//console.log(data);
data = JSON.parse(data);
var accession = data[0].Accession;
//console.log(accession);
//Defining time format
var dateFormat = d3.time.format('%Y-%m-%d');
//initializing dimensions of the visulisation
var vis = d3.select("#visualisation").append('svg'),
WIDTH = 800,
HEIGHT = 600,
MARGINS = {
top: 20,
right: 50,
bottom: 20,
left: 50
}
vis.attr('height', HEIGHT)
.attr('width', WIDTH);
//Defining range for x. Defining range and domain for y
var x = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right])
var y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]) //.domain([0, 20])
console.log("data length:" + data.length);
//Defining domain for x
x.domain(d3.extent(data, function(d) {
return dateFormat.parse(d.Date);
}));
y.domain([0, 12]);
//Define x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.tickFormat(dateFormat);
//Define y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
//Appending the axes to the svg
vis.append("svg:g")
.attr("class", "axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Rank");
//Define line
var lineGen = d3.svg.line()
//.interpolate("monotone")
.x(function(d) {
return x(dateFormat.parse(d.Date));
})
.y(function(d) {
return y(d.Rank);
});
//Appending the line to the svg
vis.append('svg:path')
.attr('d', lineGen(data))
.attr('stroke', 'steelblue')
.attr('stroke-width', 2)
.attr('fill', 'none');
vis.append("svg:text")
.attr("x", (WIDTH / 2))
.attr("y", 25)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Rank vs Date Graph of " + accession);
}