Question

我正在尝试将“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...

Answer 1

没有显示任何内容，因为您的日期未正确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, ... "

看起来不像的

与尝试显示太多值有关。检查数据数组后，在调用undefined后，所有温度值均为parseDate。

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

d.3处理50万条目

1 个答案: