D3绘制运行图，循环得到每一班列车的到发时间信息并绘图，但是只有第一次循环有图像，后面的循环有数据无图像，为什么？

Question

想要绘制每一班列车的运行轨迹，但是只有第一次循环被画出来了，后面的列车数据都有更新，但是没有图像

//循环,绘制每一趟列车的运行轨迹
                allStations.forEach(function (stations) {
                                         // 在这里执行绘制运行图的代码，使用 "stations" 变量来获取当前列车的站点信息

                    var stationNames=stations.map(function(d) {return d.Station_Name;});
                    console.log(stationNames);
                    var arriveTimes = stations.map(function(d) { return new Date(d.Arrive_Tm); });
                    console.log(arriveTimes);
                    var departTimes = stations.map(function(d) { return new Date(d.Deptr_Tm); });
                    console.log(departTimes);                
                svg.selectAll(".line")
                    .data(stations)
                    .enter()
                    .append("line")
                    .attr("class", "line")
                    .attr("x1", function(d) { return xScale(new Date(d.Arrive_Tm)); })
                    .attr("y1", function(d) { return yScale(d.Station_Name); })
                    .attr("x2", function(d) { return xScale(new Date(d.Deptr_Tm)); })
                    .attr("y2", function(d) { return yScale(d.Station_Name); })
                    .style("stroke", "steelblue")
                    .style("stroke-width", 1)
                    
                // 创建到达时间散点图
                svg.selectAll(".arrive-point")  //这个命名随意取
                .data(stations)
                .enter()
                .append("circle")
                .attr("class", "arrive-point")
                .attr("cx", function(d) { return xScale(new Date(d.Arrive_Tm)); }) //将实际到达时间转换为日期值，然后进行缩放对应到x轴上
                .attr("cy", function(d) { return yScale(d.Station_Name); })
                .attr("r", 2)
                .style("fill", "red")
                var cx=stations.map(function(d) { return xScale(new Date(d.Arrive_Tm)); });
                console.log(cx)

                var a=0;
                console.log(a);
                // 创建出发时间散点图
                svg.selectAll(".depart-point")
                .data(stations)
                .enter()
                .append("circle")
                .attr("class", "depart-point")
                .attr("cx", function(d) { return xScale(new Date(d.Deptr_Tm)); })
                .attr("cy", function(d) { return yScale(d.Station_Name); })
                .attr("r", 2)
                .style("fill", "red");
                var b=1;
                console.log(b);

            });

Answer 1

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7649546
• 除此之外, 这篇博客: （笔记）数据可视化实战：使用D3设计交互式图表中的 一、准备 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 章节文件：http://t.cn/zTI9BXG

  整个D3项目：github

  D3官方网站：d3.js.org

  中文API：introduce

  mbostock：bl.ocks.org/mbostock

  blog.visual.ly/creating-animations-and-transitions-with-d3-js/

  D3底层思想；血统的来源：http://vis.stanford.edu/ files/2011-D3-InfoVis.pdf

  D3gallery：https://www.data-to-viz.com/

  其他：

  1. 其他的探索性工具：http://www.tableausoftware.com、http://ggplot2.org/
  2. d3.geo.tile插件：随意放大缩小位图时不失真；http://t.cn/zTINvoy