在D3中渲染线图的问题

Question

我试图通过一些简单的bl.ock示例来学习D3。其中一个示例使用CSV file to create a line graph。

我使用this JSON文件为图表创建路径。下面的代码将正确的数据输出到控制台，但是当我尝试将数据（d.date，d.rain）附加到x和y域时，不会显示任何内容。

到控制台......

// hold the daily rain total
var daily_rain_total;

// get the data
d3.json("data.json", function(error, data) {

    // log the returned object on console unless error
    if (error) return console.error(error);
    console.log(data);

    days = data.data.weather;

    // step through each day
    days.forEach(function(d) {

        hourly = d.hourly;

        hourly.forEach(function(h) {
            daily_rain_total = daily_rain_total + parseFloat(h.precipMM);
        });

        d.date = d.date;
        console.log(d.date);

        d.rain = daily_rain_total.toFixed(2);
        console.log(d.rain);

        // reset total
        daily_rain_total = 0;
    });

});

渲染折线图......

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

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

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.rain); });

// Adds the svg canvas
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 + ")");


// hold the daily rain total
var daily_rain_total;

// get the data
d3.json("data.json", function(error, data) {

    // log the returned object on console unless error
    if (error) return console.error(error);
    console.log(data);

    days = data.data.weather;

    // step through each day
    days.forEach(function(d) {

        // step through each hour
        hourly = d.hourly;
        hourly.forEach(function(h) {
            daily_rain_total = daily_rain_total + parseFloat(h.precipMM);
        });

        d.date = d.date;
        console.log(d.date);

        d.rain = daily_rain_total.toFixed(2);
        console.log(d.rain);

        // reset total
        daily_rain_total = 0;
    });

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

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

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

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

});

非常感谢任何提示。