Retournements RER

Affichage des retournements du RER

basé sur pnavarrc's block: Simple SVG Path Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Retournement RER</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>
</head>
<body>

svg {
      border: solid 1px #ccc;
      background-color: #fff;
    }

.axis path,
    .axis line {
        fill: none;
        stroke: #ccc;
        shape-rendering: crispEdges;
    }

.axis text {
        font-family: sans-serif;
        font-size: 11px;
    }

.route {
      fill: none;
      stroke: red;
      stroke-width: 2px;
    }

/* Points */
    circle.main {
      fill: #EDC951;
      stroke: #CC333F;
      stroke-width: 1px;
    }

circle.control {
      fill: white;
      stroke: #00A0B0;
    }

.control-line {
      stroke-width: 1px;
      stroke: #00A0B0;
      stroke-dasharray: 1,1;
    }

.curve {
      fill: none;
/*       stroke: #CC333F; */
/*       stroke-width: 2px; */
    }

#canvas {
      display: none;
    }
    
    pre {
      font-family: Courier;
    }
  </style>
	<h3>Retournement RER</h3>
  <p>
    <button>svg to png</button>
  </p>
  <p>
  <svg width="400" height="400">
    <g class="xaxis axis"></g>
    <g class="yaxis axis"></g>
    <g class="retournements"></g>
  </svg>
  </p>
  <p>
	<canvas id="canvas"></canvas>
  </p>

var width  = 400,
        height = 400,
        margin = 0;

var xMin =-20,
      	xMax = 20;
    
    var lines = d3.range(xMin, xMax);

var svg = d3.select('svg'),
        xaxis = svg.select('g.xaxis'),
        yaxis = svg.select('g.yaxis');

var x = d3.scaleLinear()
      .domain(d3.extent(lines))
      .range([0, width]);

var y = d3.scaleLinear()
      .domain(d3.extent(lines))
      .range([0, height]);

var xAxis = d3.axisBottom(x)
      .tickSize(-width + 2 * margin);

var yAxis = d3.axisRight(y)
      .tickSize(-height + 2 * margin);

//     xaxis.call(xAxis);
//     yaxis.call(yAxis);

// Compute the path string
    function computePath(points, xOffset) {
// 			console.log(points);
      function p(point) {
        return x(point.x + xOffset) + ' ' + y(point.y);
      }

var p1 = p(points[0]),
          p2 = p(points[1]);

return 'M ' + p1 + 'L ' + p2;
    }
    
    // Ajout des codes missions
    function addMissionCode(elt, materiel, pos, code) {
      elt.append("text")
        .attr("font-family", "sans-serif")
        .attr("font-size", "12px")
        .attr("dy","-2px")
        .append("textPath")
        .attr("xlink:href", function() {return "#"+ materiel + "-" + pos;})
        .attr("startOffset", "90%")
      	.attr("text-anchor", "end")
        .text(function() {return code;});
    }
    
    // trancode partie de retournement
    function getRetournementPart(retPart) {
      var code;
      switch(retPart) {
          case "QA":
          	code = 0;
          	break;
          case "RE1":
          	code = 1;
          	break;
          case "RE2":
          	code = 2;
          	break;
          case "QD":
          	code = 3;
          	break;          	
      }
      return code;
    }
    
    // Quais
    var quais = [
      {name : "QA",
       y: -5},
       {name : "Trottoir",
       y: -10},
       {name : "QD",
       y: 0}
    ];
    var lieux = svg.selectAll("g.lieux")
    	.data(quais)
    	.enter();
    
    lieux.append("line")
      .attr("x1", x(xMin))
      .attr("y1", function(d){return y(d.y)})
      .attr("x2", x(xMax))
      .attr("y2", function(d){return y(d.y)})
      .attr("stroke", "DeepSkyBlue")
      .attr("stroke-dasharray","5, 5")
    lieux.append("text")
      .attr("x", function(d) { return x(xMin); })
      .attr("y", function(d) { return y(d.y-1); })
      .attr("font-family", "sans-serif")
      .attr("font-size", "10px")
      .text(function(d) { return d.name; });

// forme d'un retournement
		var retournement = [
      {points:[
        {x: -15, y:  5},
        {x: -10, y: -5}]
      }, 
      {points:[
        {x: -10, y: -5},
        {x: -5, y: -10}]
    	}, 
      {points:[
      	{x: -5, y: -10},
      	{x: 2, y: 0}]
    	}, 
      {points:[
        {x: 2, y: 0},
        {x: 6, y: 5}]
      }
    ];
    
		// Concatenation des données
    var res = [];
    missions.forEach(function(each) {
    	retournement.forEach(function(segment, index) {
        res.push({
          id: index,
      		part: segment.points,
          circuit: each.circuit,
          start: each.start
      	});
      });
    });
    //console.log(missions);
    
    
    var gPaths  = svg.select('g.retournements');

// Affichage train
    var trains = gPaths.selectAll('trains')
    						.data(res);
    trains.enter()
    		  .append('path')
    			.classed('curve', true)
    			.attr('id', function(d){return d.circuit + '-' + d.id })
    			.attr("stroke", "black")
    			.attr('d', function(d) {return computePath(d.part, d.start);})
    			.attr('x1', function(d){return d.part[0].x + d.start;})
    			.attr('x2', function(d){return d.part[1].x + d.start;});
    
    // Affichage missions 
    var missionTexts = gPaths.append("g")
    												 .classed("missions", true);
    missions.forEach(function(mission) {
      addMissionCode(missionTexts, mission.circuit, 0, mission.mission1);
      addMissionCode(missionTexts, mission.circuit, 3, mission.mission2);
    });
    
    // services
    services.forEach(function(service, index){
      // Couleurs et timing
      service.segments.filter(function(seg){
        	return seg.retPart == 'QA' ||
            seg.retPart == 'RE1' ||
            seg.retPart == 'RE2' ||
            seg.retPart == 'QD';
      	})
        .forEach(function(seg){
          var part = svg.select('#' + seg.circuit + '-' + getRetournementPart(seg.retPart))
                .attr("stroke", service.couleur)
                .attr("stroke-width", "2px");
        	
        	seg.x1 = part.attr("x1");
        	seg.x2 = part.attr("x2");
    		});
      
      // remplissage timing restant
      var segData = service.segments;
      segData.forEach(function (seg, i){
      	if (!seg.x1){
          if (i>0){
            seg.x1 = segData[i-1].x2;
          } else {
            seg.x1=xMin+5;
          }
        }
        if (!seg.x2){
          if (i<segData.length-1){
            seg.x2 = segData[i+1].x1;
          } else {
            seg.x2=seg.x1+3;
          }
        }
      });
      
      // segments
      var segments = svg.append('g')
      								  .classed("segments",true);
      segments.append("text")
      	 .attr("x", x(-20))
         .attr("y", y(10+index*2))
         .attr("font-family", "sans-serif")
         .attr("font-size", "10px")
      	 .attr("stroke", service.couleur)
         .text(service.nom);

function triggerDownload (imgURI) {
      var evt = new MouseEvent('click', {
        view: window,
        bubbles: false,
        cancelable: true
      });

var a = document.createElement('a');
      a.setAttribute('download', 'retournement.png');
      a.setAttribute('href', imgURI);
      a.setAttribute('target', '_blank');

a.dispatchEvent(evt);
    }

btn.addEventListener('click', function () {
      var canvas = document.getElementById('canvas');
      canvas.width  = 400;
      canvas.height = 400; 
//       canvas.style.width  = '800px';
// 			canvas.style.height = '600px';
      var ctx = canvas.getContext('2d');
      var data = (new XMLSerializer()).serializeToString(svgImg);
      var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
      var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
      var url = DOMURL.createObjectURL(svgBlob);

img.onload = function () {
        ctx.drawImage(img, 0, 0, 400, 400);
        DOMURL.revokeObjectURL(url);

var imgURI = canvas
            .toDataURL('image/png')
            .replace('image/png', 'image/octet-stream');

triggerDownload(imgURI);
      };

img.src = url;
    });
  </script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js