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

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


//循环,绘制每一趟列车的运行轨迹
                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);

            });
  • 帮你找了个相似的问题, 你可以看下: 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