0

我正在尝试将 1/2 百万数据点加载到“简单图”示例中。我猜SVG渲染可能有限制，因为这条线没有出现。你能建议我如何处理这个“大”图吗？

谢谢

// 这里是代码

<!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>

// 这里的数据（只有第一行...大约有 500,000 行）

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...
4

1 回答 1

3

没有显示任何内容，因为您的日期没有被正确解析。

您的日期如下所示：

16/01/1900

但parseDate正在使用格式说明符：

"%Y-%m-%d"

解决此问题只需要更改一行：

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

一个建议：使用开发控制台调试东西！尝试运行您的脚本会显示错误：

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

这看起来与试图显示太多值无关。检查数据数组，调用它们undefined之后的所有温度值。parseDate

最后，我认为 Pablo 关于不要尝试显示带有 500,000 点的折线图的建议是可靠的。我们的屏幕和眼睛没有足够高的分辨率使其成为有用的显示器

于 2013-07-12T15:31:25.940 回答