d3.time.scale（）返回NAN

我想以此爲榜樣：http://bl.ocks.org/mbostock/3883245 d3.time.scale（）返回NAN

但是，試圖複製我的需求值X比例時NAN返回。 y比例的值返回正常。請幫助我找出我做錯了什麼。

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

body { 
    font: 10px sans-serif; 
} 

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

.x.axis path { 
    display: none; 
} 

.line { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

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

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%Y-%m").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"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var line = d3.svg.line() 
    .x(function(d) { return x(d.key); }) 
    .y(function(d) { return y(d.values.total); }); 

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 + ")"); 
d3.csv("combine.csv", function(error, data) { 

data.forEach(function(d) { 
    d.week = parseDate(d.week); 

    }); 

    data= d3.nest() 
.key(function(d) { return d.week; }) 
.rollup(function(d) { return {"total": d.length , hours: d3.sum(d, function(g) {return g.hours; })};}) 
.entries(data); 


    x.domain(d3.extent(data, function(d) { console.log(d.key);return d.key; })); 
    console.log(d3.extent(data, function(d) { return d.key; })); 

    y.domain(d3.extent(data, function(d) { console.log(d.values.total);return d.values.total; })); 
console.log(data); 

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

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Price ($)"); 

    svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .attr("d", line); 
}); 




</script> 
</head>

來源

2014-05-21 Raj

您需要使用實際的Date對象，而不僅僅是字符串。所以，你可以更新以下行來解決這個問題：

var line = d3.svg.line() 
    .x(function (d) { 
    return x(new Date(d.key)); 
});

而且

x.domain(d3.extent(data, function (d) { 
    return new Date(d.key); 
}));

我創建了一個小提琴模擬數據：http://jsfiddle.net/LRY7w/

或者，您可以添加week財產到您從rollup返回的對象。這裏有一個fiddle和這裏的修訂後的彙總功能：

.rollup(function (d) { 
    return { 
     week: d[0].week, 
     "total": d.length, 
     hours: d3.sum(d, function (g) { 
      return g.hours; 
     }) 
    }; 
})

不得不使用d[0]因爲d是嵌套行，但因爲你是鍵控關閉一週，它在陣列中的每個對象是相同的，所以使用第一個作品就好了。然後，而不是使用new Date(d.key)，您可以使用d.values.week。

來源

2014-05-21 16:09:57 kalley

謝謝一噸卡利。只是一個問題。當我們將它解析爲日期時，爲什麼我們必須使用實際的Date對象。在我的數據數組中，鍵值格式爲「Sat Jun 01 2013 00:00:00 GMT + 0530（印度標準時間）」。因此，爲什麼需要將其明確定義爲日期。 – Raj

因爲'd3.nest'將'week'屬性轉換爲字符串。我已經添加了另一種方法來做到這一點的答案。 – kalley

謝謝凱利。你能否再次幫助我進行這個查詢。 http://stackoverflow.com/questions/23831411/d3-data-table-query – Raj

d3.time.scale（）返回NAN

回答

相關問題