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万个条目

回答

相关问题