d.3處理50萬個條目

我正在嘗試將1/2百萬個數據點加載到「簡單圖」示例中。我想可能是SVG渲染的限制，因爲該行沒有顯示出來。你能告訴我如何處理這個「大」圖嗎？d.3處理50萬個條目

感謝

//下面的代碼

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

<style> 

path{stroke: steelblue; 
    stroke-width: 4 
    ; 
    fill: none;} 

.axis path, 
.axis line {fill: none; 
      stroke: grey; 
      stroke-width: 2.5; 
      shape-rendering: crispEdges;} 

</style> 

<h1>FDD Visualization</h1> 
<h2>A simple Graph with visual aids using d3</h2> 

<body> 
<script type="text/javascript" src="d3/d3.v3.js"></script> 
<script type="text/javascript"></script> 

    <script> 

var margin = {top: 50, right: 20, bottom: 50, left: 50}, 
    width = 1020 - margin.left - margin.right, 
    height = 580 - margin.top - margin.bottom; 

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

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

var valueline = d3.svg.line() 
    .x(function(d) { return x(d.timestamp); }) 
    .y(function(d) { return y(d.temperature); }); 

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 +")") 
     .attr("fill",function(d){return"rgb(0,100,10)";}); 

// Get the data 
d3.csv("data/data_2.csv", function(error, data) 
{data.forEach(function(d) 
    {d.timestamp = parseDate(d.timestamp); 
    d.temperature = +d.temperature;}); 

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

    svg.append("path")  // Add the valueline path. 
     .attr("d", valueline(data)); 

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

    svg.append("g")   // Add the Y Axis 
     .attr("class", "y axis") 
     .call(yAxis); 

}); 

</script> 
</body>

//這裏的數據（僅第一排......它相當於爲大約50萬行數據）

timestamp,temperature 
01/01/1900,23 
02/01/1900,13 
03/01/1900,13 
04/01/1900,15 
05/01/1900,12 
06/01/1900,24 
07/01/1900,12 
08/01/1900,19 
09/01/1900,12 
10/01/1900,16 
11/01/1900,16 
12/01/1900,19 
13/01/1900,24 
14/01/1900,12 
15/01/1900,20 
16/01/1900,20 
etc...

來源

2013-07-12 user2564259

我不確定是否存在渲染限制，但屏幕沒有50萬像素。此外，如果我瞭解您的數據，自1900年以來您每天都有一個點，那就是當前的42,000點。您可能想要以某種方式將數據分組（按月，平均溫度？）。 –

感謝您的意見巴勃羅。 – user2564259

無顯示因爲你的日期不正確爲parsed。

您的日期如下：

16/01/1900

但parseDate使用格式說明：

"%Y-%m-%d"

修復這個問題只需要一行變化：

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

一建議：使用dev console來調試東西！試圖運行您的腳本顯示錯誤：

Error: Problem parsing d="MNaN,20.000000000000057LNaN,220LNaN,220LNaN, ... "

這看起來不像是與試圖顯示太多的值有關。檢查數據數組後，在調用parseDate之後，所有溫度值均爲undefined。

最後，我認爲巴勃羅關於不試圖展示500,000點線圖的建議是可靠的。我們的屏幕和眼睛沒有足夠高的分辨率來製作有用的顯示屏

來源

2013-07-12 15:31:25

感謝亞當，我重新加載了以前的文件在Excel中，它改變了我的「 - 」的「/」，所以我沒有注意到改變......感謝開發控制檯的建議，我使用的是螢火蟲，但沒有' t點我迄今爲止的任何錯誤... – user2564259

雖然我將其更改爲正確的格式，解析錯誤仍然繼續... ;-( – user2564259

它在我的電腦上工作，這是否適合你？https：// github 。/ 1輪/學習/樹/主/ stacktest/d.3％20dealing％20with％20half％20million％20entries –

d.3處理50萬個條目

回答

相關問題