D3.js硬编码数据替换CSV：如何替代d3.csv()函数？

嘿，其实根本不需要找什么替代函数——你已经把数据硬编码成JS数组了，直接把原来写在d3.csv()回调里的代码拿出来单独运行就好！

具体操作步骤： #

1. 先处理你的硬编码数据（按需调整）
   你的data数组里的date已经是数字格式（2008、2009这类），如果原示例里的parseTime是用来把字符串日期转成日期对象的，那你可以根据自己的需求调整：

   • 如果x轴用线性比例尺（适合年份数字）：可以简化数据处理步骤，只确保num是数字类型就行：

     var data = [ { date: 2008, num: 54248 }, { date: 2009, num: 54446 }, { date: 2010, num: 54731 }, { date: 2011, num: 55212 }, { date: 2012, num: 55595 }, { date: 2013, num: 56165 }, { date: 2014, num: 56690 }, { date: 2015, num: 56929 }, { date: 2016, num: 57005 }, { date: 2017, num: 57010 } ];
     
     // 处理数据：确保num是数字类型
     data.forEach(function(d) {
       d.num = +d.num;
     });
     

   • 如果还是想用时间比例尺：那需要把年份转成日期对象，比如：

     data.forEach(function(d) {
       d.date = new Date(d.date, 0, 1); // 把年份转成当年1月1日的日期对象
       d.num = +d.num;
     });
     

2. 直接执行原回调里的逻辑
   把原来包裹在d3.csv()里的代码，直接放在数据处理的后面就行，完全不需要异步回调的包裹：

   // 设定比例尺的定义域
   x.domain(d3.extent(data, function(d) { return d.date; }));
   y.domain([0, d3.max(data, function(d) { return d.num; })]);
   
   // 添加折线路径
   svg.append("path")
       .data([data])
       .attr("class", "line")
       .attr("d", valueline);
   
   // 添加X轴
   svg.append("g")
       .attr("transform", "translate(0," + height + ")")
       .call(d3.axisBottom(x));
   
   // 添加Y轴
   svg.append("g")
       .call(d3.axisLeft(y));
   

为什么不需要替代函数？ #

d3.csv()的核心作用是异步加载外部CSV文件，把解析好的数据传给回调函数。现在你已经直接拥有了数据，跳过“加载外部文件”这一步，直接用数据执行后续的比例尺、绘图逻辑就可以了，完全不需要额外的函数来替代它。

内容的提问来源于stack exchange，提问作者Zuenie