data.foreach()在d3.js上不是一个函数。

我是d3.js的新手,想创建一个折线图,但问题是,错误的是 data.foreach() 一直出现。我不知道是什么问题。我想得到所有的JSON数据,然后循环使用,这样我就可以把它画在我的线图上。因为我在互联网上看到的大多数教程或文档都是只针对csv文件的。我试着创建JSON文件,这样我就可以创建一个线形图。

这是我的js文件。

$(document).ready(() => {

    // set the dimensions and margins of the graph
    var margin = { top: 20, right: 20, bottom: 30, left: 50 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    // parse the date / time
    var parseTime = d3.timeParse("%Y");

    // set the ranges
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    // define the line
    var valueline = d3.line()
        .x(function (d) { return x(d.Date); })
        .y(function (d) { return y(d.Imports); });
    // define the line
    var valueline2 = d3.line()
        .x(function (d) { return x(d.Date); })
        .y(function (d) { return y(d.Exports); });

    // append the svg obgect to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    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 + ")");

    function draw(data) {

        var data = data[0];

        // format the data
        data.forEach(function (d) {
            d.Date = parseTime(d.Date);
            d.Imports = +d.Imports;
            d.Exports = +d.Exports;
        });

        // sort years ascending
        data.sort(function (a, b) {
            return a["Date"] - b["Date"];
        })

        // 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 Math.max(d.Imports, d.Exports);
        })]);

        // Add the valueline path.
        svg.append("path")
            .data([data])
            .attr("class", "line")
            .attr("d", valueline);
        // Add the valueline path.
        svg.append("path")
            .data([data])
            .attr("class", "line")
            .attr("d", valueline2);
        // Add the X Axis
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        // Add the Y Axis
        svg.append("g")
            .call(d3.axisLeft(y));
    }
    // Get the data

    d3.json("data.json")
        .then((data) => {
            console.log(data);
            draw(data);
        })
        .catch((error) => {
            console.log(error);
        });
});

这是我的JSON文件

[   
       {
          "Date": 1999,
          "Imports": "15",
          "Exports": "20"
       },
       {
          "Date": 2008,
          "Imports": "42",
          "Exports": "115"
       },
       {
          "Date": 2007,
          "Imports": "29",
          "Exports": "79"
       },
       {
          "Date": 2009,
          "Imports": "346",
          "Exports": "324"
       },
       {
          "Date": 2006,
          "Imports": "44",
          "Exports": "69"
       },
       {
          "Date": 2010,
          "Imports": "424",
          "Exports": "503"
       },
       {
          "Date": 2005,
          "Imports": "28",
          "Exports": "48"
       },
       {
          "Date": 2011,
          "Imports": "413",
          "Exports": "603"
       },
       {
          "Date": 2004,
          "Imports": "34",
          "Exports": "41"
       },
       {
          "Date": 2012,
          "Imports": "313",
          "Exports": "517"
       },
       {
          "Date": 2003,
          "Imports": "21",
          "Exports": "36"
       },
       {
          "Date": 2013,
          "Imports": "513",
          "Exports": "615"
       },
       {
          "Date": 2002,
          "Imports": "18",
          "Exports": "23"
       },
       {
          "Date": 2014,
          "Imports": "471",
          "Exports": "766"
       },
       {
          "Date": 2001,
          "Imports": "17",
          "Exports": "29"
       },
       {
          "Date": 2015,
          "Imports": "119",
          "Exports": "181"
       },
       {
          "Date": 2000,
          "Imports": "25",
          "Exports": "25"
       }

   ]

任何帮助将是感激的。

解决方案:

你想循环所有的数组,然后进行排序…去掉forEach循环前的.。

var data = data[0];

去掉forEach循环之前的:。

给TA打赏
共{{data.count}}人
人已打赏
未分类

无法在一个视图中使用2个弹出式菜单。

2022-9-13 14:29:28

未分类

使用芹菜的多重处理,等待线程无法收到通知信号。

2022-9-13 14:29:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索