$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();
});