D3解析錯誤

這可能是一個非常簡單的問題（但我是D3新手，試圖通過一些示例來更好地理解它的工作原理）。我試圖修改D3的一個基本示例（http://bl.ocks.org/mbostock/1667367）。我基本上保持了一切......我只是試圖用我自己的數據使用一個不同的csv文件（與S & P 500股票數據）。在示例文件中，csv文件具有日期（月份年）和股票價格。在我的數據中，我有一個UTC時間戳和一個亮度值（在0-1000之間）。下面是CSV的一個小例子：D3解析錯誤

date, light 
2013-01-01T09:00:00.000Z,554.22 
2013-01-01T09:01:00.000Z,480.83 
2013-01-01T09:02:00.000Z,433.19 
2013-01-01T09:03:00.000Z,596.89 
2013-01-01T09:04:00.000Z,421.78 
2013-01-01T09:05:00.000Z,461.23 
2013-01-01T09:06:00.000Z,560.04

時，我跑我的代碼，我得到在控制檯窗口說我有一個解析錯誤（不知道這是否是在解析數據或輕陷入了一個錯誤價值）...有沒有人看到我如何設置CSV文件（或我可能會解析它不正確）的問題？這是我正在使用的D3代碼。

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

svg { 
    font: 10px sans-serif; 
} 

path { 
    fill: steelblue; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.brush .extent { 
    stroke: #fff; 
    fill-opacity: .125; 
    shape-rendering: crispEdges; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var margin = {top: 10, right: 10, bottom: 100, left: 40}, 
    margin2 = {top: 430, right: 10, bottom: 20, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom, 
    height2 = 500 - margin2.top - margin2.bottom; 

var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; 

var x = d3.time.scale().range([0, width]), 
    x2 = d3.time.scale().range([0, width]), 
    y = d3.scale.linear().range([height, 0]), 
    y2 = d3.scale.linear().range([height2, 0]); 

var xAxis = d3.svg.axis().scale(x).orient("bottom"), 
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"), 
    yAxis = d3.svg.axis().scale(y).orient("left"); 

var brush = d3.svg.brush() 
    .x(x2) 
    .on("brush", brush); 

var area = d3.svg.area() 
    .interpolate("monotone") 
    .x(function(d) { return x(d.date); }) 
    .y0(height) 
    .y1(function(d) { return y(d.light); }); 

var area2 = d3.svg.area() 
    .interpolate("monotone") 
    .x(function(d) { return x2(d.date); }) 
    .y0(height2) 
    .y1(function(d) { return y2(d.light); }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom); 

svg.append("defs").append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

var focus = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var context = svg.append("g") 
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); 

d3.csv("Light.csv", function(error, data) { 
    console.log(data); 

    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    //d.light = +d.light; 
    //console.log(d); 
    }); 

    x.domain(d3.extent(data.map(function(d) { return d.date; }))); 
    y.domain([0, d3.max(data.map(function(d) { return d.light; }))]); 
    x2.domain(x.domain()); 
    y2.domain(y.domain()); 

    focus.append("path") 
     .datum(data) 
     .attr("clip-path", "url(#clip)") 
     .attr("d", area); 

    focus.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    focus.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    context.append("path") 
     .datum(data) 
     .attr("d", area2); 

    context.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height2 + ")") 
     .call(xAxis2); 

    context.append("g") 
     .attr("class", "x brush") 
     .call(brush) 
    .selectAll("rect") 
     .attr("y", -6) 
     .attr("height", height2 + 7); 
}); 

function brush() { 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.select("path").attr("d", area); 
    focus.select(".x.axis").call(xAxis); 
} 

</script>

來源

2013-03-22 andyopayne

你可能得到的是錯誤的，因爲你的時間格式規範 - 沒有%L佔位符（見the documentation）。這應該工作。

var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.000Z").parse;

來源

2013-03-22 21:58:17

感謝您的快速答覆。我嘗試修改格式聲明，但我仍然收到解析錯誤。從csv文件獲取數據後，您會注意到，我將數據打印到控制檯。當我看到這些數據時，它會打印出光：「554.22」 date：Tue Jan 01 2013 09:00:00 GMT-0500（Eastern Standard Time）...但是，日期對象旁邊有一個小箭頭（你可以擴展），當我這樣做，它說__proto__：無效的日期。有什麼想法嗎？ – andyopayne 2013-03-22 22:33:13

好的，你必須在這裏幫助我一下 - 它從哪裏得到解析錯誤？ – 2013-03-22 22:36:45

這很難說。錯誤信息非常長（如50行）。它基本上說：錯誤：解析問題...然後它有一大堆數字和NAN的東西，然後在錯誤消息的底部它指向d3.v3.min.js：1這有幫助嗎？ – andyopayne 2013-03-22 22:41:33

在csv文件的標題中，「light」標題前面有一個額外的空格。這導致了d3.csv的處理問題。

data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.light = +d.light; // won't be able to access the light column data with the space 
    d.light = d[' light']; // this would work if you can't fix the header at the csv source 
});

嗯，也許我會提交一個補丁，以D3來解決這個問題...

來源

2013-03-23 21:03:36 Digikata

D3解析錯誤

回答

相關問題