$style.addEventListener('change', function (event) { transitive.style.reset(); if (event.target.checked) { transitive.style.load({ labels: { cursor: function () { return 'pointer'; } }, stops: { 'stroke-opacity': function (display, data) { if (data.stop.isEndPoint) { if (data.pattern.frequency.average > 12) return false; if (data.pattern.frequency.average > 6) return 0.5; return 0.25; } } }, patterns: { opacity: function (display, data) { if (data.frequency.average > 12) return false; if (data.frequency.average > 6) return 0.5; return 0.25; }, 'stroke-dasharray': function() { return false; } } }) } transitive.render(); });
$reverse.addEventListener('change', function (event) { DIRECTION = event.target.checked ? '1' : '0'; // only show appropriate patterns updatePatterns(Patterns, ROUTE, DIRECTION); transitive.render(); });
Routes.on('select', function (option) { localStorage.setItem('selected-route', option.name); ROUTE = getRoute(option.name); STOPS = getStopIds(ROUTE); // only show appropriate patterns updatePatterns(Patterns, ROUTE, DIRECTION); transitive.render(); });
window.onload = function(){ // var d3 = require('d3'); var Transitive = require('transitive'); // var OtpProfiler = require('otp-profiler'); var transitive = new Transitive({ el: document.getElementById('transitive-canvas'), // これは路線説明欄を表示するためにある // legendEl: document.getElementById('legend'), data: DATA, styles: STYLES, drawGrid: false, gridCellSize: 300, initialBounds: [ [-77.093507, 38.858710], [-76.947266, 38.921104] ], displayMargins: { right: 400, bottom: 50 }, draggableTypes: ['PLACE'] }); // 開始マーカと終了マーカのマウスドラッグイベントを受信するサンプル(以下をコメントにしてもドラッグイベントは発生する) // // listen for place drag events // transitive.on('place.from.dragend', function(place) { // console.log('dragged "from" place to: ' + place.getLat() + ',' + place.getLon()); // }); // transitive.on('place.to.dragend', function(place) { // console.log('dragged "to" place to: ' + place.getLat() + ',' + place.getLon()); // }); transitive.render(); // 右上のルートリストメニュー表示とマウスオーバーイベントを追加している。 // // set the journey option list // DATA.journeys.forEach(function(journey, index) { // var div = document.createElement("div"); // div.id = journey.journey_id; // div.className = 'listItem'; // div.innerHTML = journey.journey_name; // div.onmouseover = function(event) { // transitive.focusJourney(event.target.id); // }; // div.onmouseout = function(event) { // transitive.focusJourney(); // }; // document.getElementById('list').appendChild(div); // }); }
profiler.journey(od, function(err, transitiveData) { console.log("generated transitive data:"); console.log(transitiveData); var transitive = new Transitive({ data: transitiveData, drawGrid: true, el: document.getElementById('canvas'), gridCellSize: 600, styles: STYLES }); // apply computed behaviors transitive.on('render', function (transitive) { each(COMPUTED, function (behavior) { behavior(transitive); }); }); transitive.render(); // set the journey option list transitiveData.journeys.forEach(function(journey, index) { var div = document.createElement("div"); div.id = journey.journey_id; div.className = 'listItem'; div.innerHTML = journey.journey_name; div.onmouseover=function(event) { transitive.focusJourney(event.target.id); }; div.onmouseout=function(event) { transitive.focusJourney(); }; document.getElementById('list').appendChild(div); }); });
legendEl : document.getElementById('legend'), data: DATA, styles: STYLES, gridCellSize: 400, useDynamicRendering: true, drawGrid: true }); // apply computed behaviors transitive.on('render', function (transitive) { each(COMPUTED, function (behavior) { behavior(transitive); }); }); transitive.render(); // set the journey option list DATA.journeys.forEach(function(journey, index) { var div = document.createElement("div"); div.id = journey.journey_id; div.className = 'listItem'; div.innerHTML = journey.journey_name; div.onmouseover=function(event) { //d3.selectAll('.transitive-path-highlight').style('visibility', 'hidden'); //d3.select('#transitive-path-highlight-journey-' + event.target.id).style('visibility', 'visible'); //d3.selectAll('.transitive-transfer-stops-journey-' + event.target.id).style('visibility', 'visible'); transitive.focusJourney(event.target.id); }; div.onmouseout=function(event) {
patterns.on('change', function() { transitive.render(); });