想要绘制每一班列车的运行轨迹,但是只有第一次循环被画出来了,后面的列车数据都有更新,但是没有图像
//循环,绘制每一趟列车的运行轨迹
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);
});
章节文件: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/
其他: