Javascript 从数据对象数组创建行grpah

我遇到了一个奇怪的问题，用D3从一个解析数据对象数组中绘制一个简单的线图

当我将数据对象数组硬编码到代码中时，图形将呈现良好。但是，当我解析JSON文件、创建数据对象并将其推送到数组时，它不会呈现

这两个数组（硬编码与解析）具有完全相同的数据，但只有硬编码的数组才能呈现图形

硬编码数据。。。（）

已解析的JSON（）

---

当我检查控制台时，lineData数组的格式和值与硬编码数据相同，但x/y轴和line不会显示。请帮忙

d3

json

函数是异步的。因此，创建行的代码是在json数据实际到达之前执行的。您需要将行创建代码移动到

json

函数中：

d3.json("https://api.myjson.com/bins/53grr", function(error, data) {

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

    var days = data.data.weather;

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

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

        // add data to day
        day = {date: new Date(d.date), rain: dailyRainTotal.toFixed(2)};
        // push day to results array
        lineData.push(day);

        // reset the total
        dailyRainTotal = 0;
    });

  var vis = d3.select("#visualisation"),
  WIDTH = 600,
  HEIGHT = 250,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
xRange = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function (d) {
    return d.date;
  }),
  d3.max(lineData, function (d) {
    return d.date;
  })
]),

yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function (d) {
    return d.rain;
  }),
  d3.max(lineData, function (d) {
    return d.rain * 1.2;
  })
]),

xAxis = d3.svg.axis()
  .scale(xRange)
  .tickSize(5),

yAxis = d3.svg.axis()
  .scale(yRange)
  .tickSize(5)
  .orient("left");

vis.append("svg:g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
  .call(xAxis);

vis.append("svg:g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + (MARGINS.left) + ",0)")
  .call(yAxis);

var lineFunc = d3.svg.line()
  .x(function (d) {
    return xRange(d.date);
  })
  .y(function (d) {
    return yRange(d.rain);
  })
  .interpolate('linear');

vis.append("svg:path")
  .attr("d", lineFunc(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", .5)
  .attr("fill", "none");
});

// global variables
var dailyRainTotal = 0,
    lineData = [],
    day = {};

// get the data
d3.json("https://api.myjson.com/bins/53grr", function(error, data) {

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

    var days = data.data.weather;

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

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

        // add data to day
        day = {date: new Date(d.date), rain: dailyRainTotal.toFixed(2)};
        // push day to results array
        lineData.push(day);

        // reset the total
        dailyRainTotal = 0;
    });
});

var vis = d3.select("#visualisation"),
  WIDTH = 600,
  HEIGHT = 250,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
xRange = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function (d) {
    return d.date;
  }),
  d3.max(lineData, function (d) {
    return d.date;
  })
]),

yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function (d) {
    return d.rain;
  }),
  d3.max(lineData, function (d) {
    return d.rain * 1.2;
  })
]),

xAxis = d3.svg.axis()
  .scale(xRange)
  .tickSize(5),

yAxis = d3.svg.axis()
  .scale(yRange)
  .tickSize(5)
  .orient("left");

vis.append("svg:g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
  .call(xAxis);

vis.append("svg:g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + (MARGINS.left) + ",0)")
  .call(yAxis);

var lineFunc = d3.svg.line()
  .x(function (d) {
    return xRange(d.date);
  })
  .y(function (d) {
    return yRange(d.rain);
  })
  .interpolate('linear');

vis.append("svg:path")
  .attr("d", lineFunc(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", .5)
  .attr("fill", "none");

d3.json("https://api.myjson.com/bins/53grr", function(error, data) {

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

    var days = data.data.weather;

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

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

        // add data to day
        day = {date: new Date(d.date), rain: dailyRainTotal.toFixed(2)};
        // push day to results array
        lineData.push(day);

        // reset the total
        dailyRainTotal = 0;
    });

  var vis = d3.select("#visualisation"),
  WIDTH = 600,
  HEIGHT = 250,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
xRange = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function (d) {
    return d.date;
  }),
  d3.max(lineData, function (d) {
    return d.date;
  })
]),

yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function (d) {
    return d.rain;
  }),
  d3.max(lineData, function (d) {
    return d.rain * 1.2;
  })
]),

xAxis = d3.svg.axis()
  .scale(xRange)
  .tickSize(5),

yAxis = d3.svg.axis()
  .scale(yRange)
  .tickSize(5)
  .orient("left");

vis.append("svg:g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
  .call(xAxis);

vis.append("svg:g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + (MARGINS.left) + ",0)")
  .call(yAxis);

var lineFunc = d3.svg.line()
  .x(function (d) {
    return xRange(d.date);
  })
  .y(function (d) {
    return yRange(d.rain);
  })
  .interpolate('linear');

vis.append("svg:path")
  .attr("d", lineFunc(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", .5)
  .attr("fill", "none");
});