src/component/busMap.js
// Renders vehicle paths based on last two recent positions
Renders vehicle paths based on last two recent positions
Renders vehicle paths based on last two recent positions
drawVehiclePath(pathJSON) {
        let vehicleIds = Object.keys(pathJSON)
        let points = Object.values(pathJSON)
        let {vehicle} = this.state
        let pathTooltip = d3.select(".path-tooltip")
                    .append("div")
                    .attr("class", "tooltip")				
                    .style("opacity", 0);
        let line = d3.line()
                    .x((d,i)=>{
                        return d[0]
                    })
                    .y((d,i)=>{
                        return d[1]
                    })
        points.forEach((point, i) => {
            if(point.length > 1)
                vehicle.append("path")
                    .attr("class", "vehicle-path")
                    .attr("d", line(point))
                    .style("cursor", "pointer")
                    .on("mouseover", function(d) {	
                        pathTooltip.transition()		
                            .duration(100)		
                            .style("opacity", .9)		
                        pathTooltip.html(`Vehicle ID - ${vehicleIds[i]}`)	
                        }
                    )
        })
    }
drawVehiclePath ( pathJSON ) { let vehicleIds = Object . keys ( pathJSON ) let points = Object . values ( pathJSON ) let { vehicle } = this . state let pathTooltip = d3 . select ( ".path-tooltip" ) . append ( "div" ) . attr ( "class" , "tooltip" ) . style ( "opacity" , 0 ) ; let line = d3 . line ( ) . x ( ( d , i ) => { return d [ 0 ] } ) . y ( ( d , i ) => { return d [ 1 ] } ) points . forEach ( ( point , i ) => { if ( point . length > 1 ) vehicle . append ( "path" ) . attr ( "class" , "vehicle-path" ) . attr ( "d" , line ( point ) ) . style ( "cursor" , "pointer" ) . on ( "mouseover" , function ( d ) { pathTooltip . transition ( ) . duration ( 100 ) . style ( "opacity" , .9 ) pathTooltip . html ( ` ${ vehicleIds [ i ] } ` ) } ) } ) }
Renders vehicle paths based on last two recent positions
Renders vehicle paths based on last two recent positions