jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

initial working version

css_transitions
Alex de Mulder 10 years ago
parent
92bf75d669
commit
ff246743f5
3 changed files with 144 additions and 26 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +65
    -0
      examples/svgTimeline/03_much_data.html
  2. +13
    -2
      src/svgTimeline/Item.js
  3. +66
    -24
      src/svgTimeline/svgTimeline.js

+ 65
- 0
examples/svgTimeline/03_much_data.html View File

@ -0,0 +1,65 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | a lot of data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#bars {
fill: #d2e2ff;
}
</style>
<script src="../../src/svgTimeline/util.js" charset="utf-8"></script>
<script src="../../src/svgTimeline/d3.v3.js" charset="utf-8"></script>
<script src="../../src/svgTimeline/hammer.min.js" charset="utf-8"></script>
<script src="../../src/svgTimeline/moment-with-langs.min.js"></script>
<script src="../../src/svgTimeline/Item.js"></script>
<script src="../../src/svgTimeline/svgTimeline.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>
Test with a lot of data
</h1>
<p>
<label for="count">Number of items</label>
<input id="count" value="100">
<input id="draw" type="button" value="draw" onclick="draw()">
</p>
<div id="visualization"></div>
<script>
function draw() {
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
// create data
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
}
var container = document.getElementById('visualization');
container.innerHTML = ""
var options = {
start: now.clone().add('days', -3),
end: now.clone().add('days', 11),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
//maxHeight: 300,
//height: '300px',
//orientation: 'top'
};
var timeline = new SvgTimeline(container, newData, options);
}
</script>
</body>
</html>

+ 13
- 2
src/svgTimeline/Item.js View File

@ -26,9 +26,16 @@ function Item(properties, constants) {
this.end = 0; this.end = 0;
this.content = "no content"; this.content = "no content";
this.class = ""; this.class = "";
this.level = 0;
this.active = false; this.active = false;
this.setProperties(properties, constants); this.setProperties(properties, constants);
this.timeX = 0;
this.drawX = 0;
this.y = 0;
this.width = 40;
this.convertDatesToUNIX(); this.convertDatesToUNIX();
this.duration = 0; this.duration = 0;
@ -38,7 +45,6 @@ function Item(properties, constants) {
this.svg = null; this.svg = null;
this.svgLine = null; this.svgLine = null;
} }
@ -67,7 +73,12 @@ Item.prototype.setProperties = function(properties, constants) {
Item.prototype.convertDatesToUNIX = function() { Item.prototype.convertDatesToUNIX = function() {
this.start = moment(this.start,"YYYY-MM-DD").valueOf(); this.start = moment(this.start,"YYYY-MM-DD").valueOf();
if (this.end != null) {
if (this.end != 0) {
this.end = moment(this.end,"YYYY-MM-DD").valueOf(); this.end = moment(this.end,"YYYY-MM-DD").valueOf();
} }
}
Item.prototype.getLength = function(msPerPixel) {
this.width = Math.max(40,this.duration/msPerPixel);
return this.width;
} }

+ 66
- 24
src/svgTimeline/svgTimeline.js View File

@ -148,7 +148,10 @@ function SvgTimeline (container, items, options) {
} }
this.items = {}; this.items = {};
this.sortedItems = [];
this.activeItems = {}; this.activeItems = {};
this.sortedActiveItems = [];
this._createItems(items); this._createItems(items);
this.container = container; this.container = container;
@ -175,6 +178,8 @@ function SvgTimeline (container, items, options) {
this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) ); this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
//this._drawLines(); //this._drawLines();
this._update();
} }
SvgTimeline.prototype._createSVG = function() { SvgTimeline.prototype._createSVG = function() {
@ -188,15 +193,15 @@ SvgTimeline.prototype._createSVG = function() {
SvgTimeline.prototype._createItems = function (items) { SvgTimeline.prototype._createItems = function (items) {
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
this.items[items[i].id] = new Item(items[i], this.constants); this.items[items[i].id] = new Item(items[i], this.constants);
this.sortedItems.push(this.items[items[i].id]);
} }
this._sortItems(this.sortedItems);
}
SvgTimeline.prototype._sortItems = function (items) {
items.sort(function(a,b) {return a.start - b.start});
} }
/**
* Get the pointer location from a touch location
* @param {{pageX: Number, pageY: Number}} touch
* @return {{x: Number, y: Number}} pointer
* @private
*/
SvgTimeline.prototype._getPointer = function (touch) { SvgTimeline.prototype._getPointer = function (touch) {
return { return {
x: touch.pageX, x: touch.pageX,
@ -260,6 +265,7 @@ SvgTimeline.prototype._onMouseMoveTitle = function() {};
SvgTimeline.prototype._update = function() { SvgTimeline.prototype._update = function() {
this.axis._update(); this.axis._update();
this._getActiveItems(); this._getActiveItems();
this._updateItems();
}; };
SvgTimeline.prototype._getActiveItems = function() { SvgTimeline.prototype._getActiveItems = function() {
@ -269,19 +275,24 @@ SvgTimeline.prototype._getActiveItems = function() {
} }
} }
this.sortedActiveItems = []
var rangeStart = this.range.start-200*this.axis.msPerPixel
var rangeEnd = (this.range.end+200*this.axis.msPerPixel)
for (var itemId in this.items) { for (var itemId in this.items) {
if (this.items.hasOwnProperty(itemId)) { if (this.items.hasOwnProperty(itemId)) {
if (this.items[itemId].start >= this.range.start && this.items[itemId].start < this.range.end ||
this.items[itemId].end >= this.range.start && this.items[itemId].end < this.range.end
) {
if (this.items[itemId].start >= rangeStart && this.items[itemId].start < rangeEnd ||
this.items[itemId].end >= rangeStart && this.items[itemId].end < rangeEnd) {
if (this.items[itemId].active == false) { if (this.items[itemId].active == false) {
this.activeItems[itemId] = this.items[itemId]; this.activeItems[itemId] = this.items[itemId];
} }
this.activeItems[itemId].active = true; this.activeItems[itemId].active = true;
this.sortedActiveItems.push(this.activeItems[itemId]);
} }
} }
} }
this._sortItems(this.sortedActiveItems);
// cleanup
for (var itemId in this.activeItems) { for (var itemId in this.activeItems) {
if (this.activeItems.hasOwnProperty(itemId)) { if (this.activeItems.hasOwnProperty(itemId)) {
if (this.activeItems[itemId].active == false) { if (this.activeItems[itemId].active == false) {
@ -297,26 +308,57 @@ SvgTimeline.prototype._getActiveItems = function() {
SvgTimeline.prototype._updateItems = function() { SvgTimeline.prototype._updateItems = function() {
for (var itemId in this.activeItems) {
if (this.activeItems.hasOwnProperty(itemId)) {
var item = this.activeItems[itemId];
if (item.svg == null) {
item.svg = d3.select("svg#main")
.append("rect")
.attr("x")
for (var i = 0; i < this.sortedActiveItems.length; i++) {
var item = this.sortedActiveItems[i];
if (item.svg == null) {
item.svg = d3.select("svg#main")
.append("rect")
.attr("class","item")
.style("stroke", "rgb(6,120,155)")
.style("fill", "rgb(6,120,155)");
if (item.end == 0) {
item.svgLine = d3.select("svg#main") item.svgLine = d3.select("svg#main")
.append("line")
.append("line")
.attr("y1",this.constants.barHeight)
.style("stroke", "rgb(200,200,255)")
.style("stroke-width", 3)
} }
} }
item.svg.attr('width',item.getLength(this.axis.msPerPixel))
.attr("x",this._getXforItem(item))
.attr("y",this._getYforItem(item, i))
.attr('height',25)
if (item.end == 0) {
item.svgLine.attr('y2',item.y)
.attr('x1',item.timeX)
.attr('x2',item.timeX)
}
} }
}; };
SvgTimeline.prototype._getXforTime = function(time) {
}
SvgTimeline.prototype._getLengthforDuration = function(time) {
SvgTimeline.prototype._getXforItem = function(item) {
item.timeX = (item.start - this.range.start)/this.axis.msPerPixel;
if (item.end == 0) {
item.drawX = item.timeX - item.width * 0.5;
}
else {
item.drawX = item.timeX;
}
return item.drawX;
} }
SvgTimeline.prototype._getYforItem = function(item, index) {
var bounds = 10;
var startIndex = Math.max(0,index-bounds);
item.level = 0;
for (var i = startIndex; i < index; i++) {
var item2 = this.sortedActiveItems[i];
if (item.drawX <= (item2.drawX + item2.width + 5) && item2.level == item.level) {
item.level += 1;
}
}
item.y = 100 + 50*item.level;
return item.y;
}

Write Preview
Loading…
Cancel
Save