mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
First rendering draft
This commit is contained in:
knsv
parent
2512666f49
commit
1b016bd412
@ -1,357 +1,305 @@
|
|||||||
var w = 1600;
|
var gantt = require('./parser/gantt').parser;
|
||||||
var h = 800;
|
gantt.yy = require('./ganttDb');
|
||||||
|
var d3 = require('./d3');
|
||||||
|
|
||||||
|
|
||||||
var svg = d3.selectAll(".svg")
|
|
||||||
//.selectAll("svg")
|
module.exports.draw = function (text, id) {
|
||||||
.append("svg")
|
gantt.yy.clear();
|
||||||
.attr("width", w)
|
gantt.parse(text);
|
||||||
.attr("height", h)
|
console.log(gantt.yy.getTasks());
|
||||||
.attr("class", "svg");
|
var w = 1200;
|
||||||
|
var h = 400;
|
||||||
|
|
||||||
|
var svg = d3.select('#'+id)
|
||||||
|
.attr("width", w)
|
||||||
|
.attr("height", h);
|
||||||
|
/*var svg = d3.selectAll(".svg")
|
||||||
|
//.selectAll("svg")
|
||||||
|
.append("svg")
|
||||||
|
.attr("width", w)
|
||||||
|
.attr("height", h)
|
||||||
|
.attr("class", "svg");*/
|
||||||
|
|
||||||
// http://codepen.io/anon/pen/azLvWR
|
// http://codepen.io/anon/pen/azLvWR
|
||||||
|
|
||||||
var taskArray = [
|
var taskArray = gantt.yy.getTasks();
|
||||||
{
|
|
||||||
task: "conceptualize",
|
|
||||||
type: "development",
|
|
||||||
startTime: "2013-1-28", //year/month/day
|
|
||||||
endTime: "2013-2-1",
|
|
||||||
details: "This actually didn't take any conceptualization"
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
var dateFormat = d3.time.format("%Y-%m-%d");
|
||||||
task: "sketch",
|
|
||||||
type: "development",
|
|
||||||
startTime: "2013-2-1",
|
|
||||||
endTime: "2013-2-6",
|
|
||||||
details: "No sketching either, really"
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
// Set timescale
|
||||||
task: "color profiles",
|
var timeScale = d3.time.scale()
|
||||||
type: "development",
|
.domain([d3.min(taskArray, function (d) {
|
||||||
startTime: "2013-2-6",
|
return dateFormat.parse(d.startTime);
|
||||||
endTime: "2013-2-9"
|
}),
|
||||||
},
|
d3.max(taskArray, function (d) {
|
||||||
|
return dateFormat.parse(d.endTime);
|
||||||
|
})])
|
||||||
|
.range([0, w - 150]);
|
||||||
|
|
||||||
{
|
var categories = [];
|
||||||
task: "HTML",
|
|
||||||
type: "coding",
|
|
||||||
startTime: "2013-2-2",
|
|
||||||
endTime: "2013-2-6",
|
|
||||||
details: "all three lines of it"
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
for (var i = 0; i < taskArray.length; i++) {
|
||||||
task: "write the JS",
|
categories.push(taskArray[i].type);
|
||||||
type: "coding",
|
|
||||||
startTime: "2013-2-6",
|
|
||||||
endTime: "2013-2-9"
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
task: "advertise",
|
|
||||||
type: "promotion",
|
|
||||||
startTime: "2013-2-9",
|
|
||||||
endTime: "2013-2-12",
|
|
||||||
details: "This counts, right?"
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
task: "spam links",
|
|
||||||
type: "promotion",
|
|
||||||
startTime: "2013-2-12",
|
|
||||||
endTime: "2013-2-14"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
task: "eat",
|
|
||||||
type: "celebration",
|
|
||||||
startTime: "2013-2-8",
|
|
||||||
endTime: "2013-2-13",
|
|
||||||
details: "All the things"
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
task: "crying",
|
|
||||||
type: "development",
|
|
||||||
startTime: "2013-2-13",
|
|
||||||
endTime: "2013-2-16"
|
|
||||||
},
|
|
||||||
|
|
||||||
];
|
|
||||||
|
|
||||||
var dateFormat = d3.time.format("%Y-%m-%d");
|
|
||||||
|
|
||||||
var timeScale = d3.time.scale()
|
|
||||||
.domain([d3.min(taskArray, function(d) {return dateFormat.parse(d.startTime);}),
|
|
||||||
d3.max(taskArray, function(d) {return dateFormat.parse(d.endTime);})])
|
|
||||||
.range([0,w-150]);
|
|
||||||
|
|
||||||
var categories = [];
|
|
||||||
|
|
||||||
for (var i = 0; i < taskArray.length; i++){
|
|
||||||
categories.push(taskArray[i].type);
|
|
||||||
}
|
|
||||||
|
|
||||||
var catsUnfiltered = categories; //for vert labels
|
|
||||||
|
|
||||||
categories = checkUnique(categories);
|
|
||||||
|
|
||||||
|
|
||||||
makeGant(taskArray, w, h);
|
|
||||||
|
|
||||||
var title = svg.append("text")
|
|
||||||
.text("Gantt Chart Process")
|
|
||||||
.attr("x", w/2)
|
|
||||||
.attr("y", 25)
|
|
||||||
.attr("text-anchor", "middle")
|
|
||||||
.attr("font-size", 18)
|
|
||||||
.attr("fill", "#009FFC");
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function makeGant(tasks, pageWidth, pageHeight){
|
|
||||||
|
|
||||||
var barHeight = 20;
|
|
||||||
var gap = barHeight + 4;
|
|
||||||
var topPadding = 75;
|
|
||||||
var sidePadding = 75;
|
|
||||||
|
|
||||||
var colorScale = d3.scale.linear()
|
|
||||||
.domain([0, categories.length])
|
|
||||||
.range(["#00B9FA", "#F95002"])
|
|
||||||
.interpolate(d3.interpolateHcl);
|
|
||||||
|
|
||||||
makeGrid(sidePadding, topPadding, pageWidth, pageHeight);
|
|
||||||
drawRects(tasks, gap, topPadding, sidePadding, barHeight, colorScale, pageWidth, pageHeight);
|
|
||||||
vertLabels(gap, topPadding, sidePadding, barHeight, colorScale);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h){
|
|
||||||
|
|
||||||
var bigRects = svg.append("g")
|
|
||||||
.selectAll("rect")
|
|
||||||
.data(theArray)
|
|
||||||
.enter()
|
|
||||||
.append("rect")
|
|
||||||
.attr("x", 0)
|
|
||||||
.attr("y", function(d, i){
|
|
||||||
return i*theGap + theTopPad - 2;
|
|
||||||
})
|
|
||||||
.attr("width", function(d){
|
|
||||||
return w-theSidePad/2;
|
|
||||||
})
|
|
||||||
.attr("height", theGap)
|
|
||||||
.attr("stroke", "none")
|
|
||||||
.attr("fill", function(d){
|
|
||||||
for (var i = 0; i < categories.length; i++){
|
|
||||||
if (d.type == categories[i]){
|
|
||||||
return d3.rgb(theColorScale(i));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.attr("opacity", 0.2);
|
|
||||||
|
|
||||||
|
|
||||||
var rectangles = svg.append('g')
|
|
||||||
.selectAll("rect")
|
|
||||||
.data(theArray)
|
|
||||||
.enter();
|
|
||||||
|
|
||||||
|
|
||||||
var innerRects = rectangles.append("rect")
|
|
||||||
.attr("rx", 3)
|
|
||||||
.attr("ry", 3)
|
|
||||||
.attr("x", function(d){
|
|
||||||
return timeScale(dateFormat.parse(d.startTime)) + theSidePad;
|
|
||||||
})
|
|
||||||
.attr("y", function(d, i){
|
|
||||||
return i*theGap + theTopPad;
|
|
||||||
})
|
|
||||||
.attr("width", function(d){
|
|
||||||
return (timeScale(dateFormat.parse(d.endTime))-timeScale(dateFormat.parse(d.startTime)));
|
|
||||||
})
|
|
||||||
.attr("height", theBarHeight)
|
|
||||||
.attr("stroke", "none")
|
|
||||||
.attr("fill", function(d){
|
|
||||||
for (var i = 0; i < categories.length; i++){
|
|
||||||
if (d.type == categories[i]){
|
|
||||||
return d3.rgb(theColorScale(i));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
var rectText = rectangles.append("text")
|
|
||||||
.text(function(d){
|
|
||||||
return d.task;
|
|
||||||
})
|
|
||||||
.attr("x", function(d){
|
|
||||||
return (timeScale(dateFormat.parse(d.endTime))-timeScale(dateFormat.parse(d.startTime)))/2 + timeScale(dateFormat.parse(d.startTime)) + theSidePad;
|
|
||||||
})
|
|
||||||
.attr("y", function(d, i){
|
|
||||||
return i*theGap + 14+ theTopPad;
|
|
||||||
})
|
|
||||||
.attr("font-size", 11)
|
|
||||||
.attr("text-anchor", "middle")
|
|
||||||
.attr("text-height", theBarHeight)
|
|
||||||
.attr("fill", "#fff");
|
|
||||||
|
|
||||||
|
|
||||||
rectText.on('mouseover', function(e) {
|
|
||||||
// console.log(this.x.animVal.getItem(this));
|
|
||||||
var tag = "";
|
|
||||||
|
|
||||||
if (typeof d3.select(this).data()[0].details !== 'undefined'){
|
|
||||||
tag = "Task: " + d3.select(this).data()[0].task + "<br/>" +
|
|
||||||
"Type: " + d3.select(this).data()[0].type + "<br/>" +
|
|
||||||
"Starts: " + d3.select(this).data()[0].startTime + "<br/>" +
|
|
||||||
"Ends: " + d3.select(this).data()[0].endTime + "<br/>" +
|
|
||||||
"Details: " + d3.select(this).data()[0].details;
|
|
||||||
} else {
|
|
||||||
tag = "Task: " + d3.select(this).data()[0].task + "<br/>" +
|
|
||||||
"Type: " + d3.select(this).data()[0].type + "<br/>" +
|
|
||||||
"Starts: " + d3.select(this).data()[0].startTime + "<br/>" +
|
|
||||||
"Ends: " + d3.select(this).data()[0].endTime;
|
|
||||||
}
|
|
||||||
var output = document.getElementById("tag");
|
|
||||||
|
|
||||||
var x = this.x.animVal.getItem(this) + "px";
|
|
||||||
var y = this.y.animVal.getItem(this) + 25 + "px";
|
|
||||||
|
|
||||||
output.innerHTML = tag;
|
|
||||||
output.style.top = y;
|
|
||||||
output.style.left = x;
|
|
||||||
output.style.display = "block";
|
|
||||||
}).on('mouseout', function() {
|
|
||||||
var output = document.getElementById("tag");
|
|
||||||
output.style.display = "none";
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
innerRects.on('mouseover', function(e) {
|
|
||||||
//console.log(this);
|
|
||||||
var tag = "";
|
|
||||||
|
|
||||||
if (typeof d3.select(this).data()[0].details !== 'undefined'){
|
|
||||||
tag = "Task: " + d3.select(this).data()[0].task + "<br/>" +
|
|
||||||
"Type: " + d3.select(this).data()[0].type + "<br/>" +
|
|
||||||
"Starts: " + d3.select(this).data()[0].startTime + "<br/>" +
|
|
||||||
"Ends: " + d3.select(this).data()[0].endTime + "<br/>" +
|
|
||||||
"Details: " + d3.select(this).data()[0].details;
|
|
||||||
} else {
|
|
||||||
tag = "Task: " + d3.select(this).data()[0].task + "<br/>" +
|
|
||||||
"Type: " + d3.select(this).data()[0].type + "<br/>" +
|
|
||||||
"Starts: " + d3.select(this).data()[0].startTime + "<br/>" +
|
|
||||||
"Ends: " + d3.select(this).data()[0].endTime;
|
|
||||||
}
|
|
||||||
var output = document.getElementById("tag");
|
|
||||||
|
|
||||||
var x = (this.x.animVal.value + this.width.animVal.value/2) + "px";
|
|
||||||
var y = this.y.animVal.value + 25 + "px";
|
|
||||||
|
|
||||||
output.innerHTML = tag;
|
|
||||||
output.style.top = y;
|
|
||||||
output.style.left = x;
|
|
||||||
output.style.display = "block";
|
|
||||||
}).on('mouseout', function() {
|
|
||||||
var output = document.getElementById("tag");
|
|
||||||
output.style.display = "none";
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function makeGrid(theSidePad, theTopPad, w, h){
|
|
||||||
|
|
||||||
var xAxis = d3.svg.axis()
|
|
||||||
.scale(timeScale)
|
|
||||||
.orient('bottom')
|
|
||||||
.ticks(d3.time.weeks, 5)
|
|
||||||
.tickSize(-h+theTopPad+20, 0, 0)
|
|
||||||
.tickFormat(d3.time.format('%d %b'));
|
|
||||||
|
|
||||||
var grid = svg.append('g')
|
|
||||||
.attr('class', 'grid')
|
|
||||||
.attr('transform', 'translate(' +theSidePad + ', ' + (h - 50) + ')')
|
|
||||||
.call(xAxis)
|
|
||||||
.selectAll("text")
|
|
||||||
.style("text-anchor", "middle")
|
|
||||||
.attr("fill", "#000")
|
|
||||||
.attr("stroke", "none")
|
|
||||||
.attr("font-size", 10)
|
|
||||||
.attr("dy", "1em");
|
|
||||||
}
|
|
||||||
|
|
||||||
function vertLabels(theGap, theTopPad, theSidePad, theBarHeight, theColorScale){
|
|
||||||
var numOccurances = [];
|
|
||||||
var prevGap = 0;
|
|
||||||
|
|
||||||
for (var i = 0; i < categories.length; i++){
|
|
||||||
numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered)];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var axisText = svg.append("g") //without doing this, impossible to put grid lines behind text
|
var catsUnfiltered = categories; //for vert labels
|
||||||
.selectAll("text")
|
|
||||||
.data(numOccurances)
|
categories = checkUnique(categories);
|
||||||
.enter()
|
|
||||||
.append("text")
|
|
||||||
.text(function(d){
|
makeGant(taskArray, w, h);
|
||||||
return d[0];
|
|
||||||
})
|
var title = svg.append("text")
|
||||||
.attr("x", 10)
|
.text(gantt.yy.getTitle())
|
||||||
.attr("y", function(d, i){
|
.attr("x", w / 2)
|
||||||
if (i > 0){
|
.attr("y", 25)
|
||||||
for (var j = 0; j < i; j++){
|
.attr("text-anchor", "middle")
|
||||||
prevGap += numOccurances[i-1][1];
|
.attr("font-size", 18)
|
||||||
// console.log(prevGap);
|
.attr("fill", "#009FFC");
|
||||||
return d[1]*theGap/2 + prevGap*theGap + theTopPad;
|
|
||||||
|
|
||||||
|
function makeGant(tasks, pageWidth, pageHeight) {
|
||||||
|
|
||||||
|
var barHeight = 20;
|
||||||
|
var gap = barHeight + 4;
|
||||||
|
var topPadding = 75;
|
||||||
|
var sidePadding = 75;
|
||||||
|
|
||||||
|
var colorScale = d3.scale.linear()
|
||||||
|
.domain([0, categories.length])
|
||||||
|
.range(["#00B9FA", "#F95002"])
|
||||||
|
.interpolate(d3.interpolateHcl);
|
||||||
|
|
||||||
|
makeGrid(sidePadding, topPadding, pageWidth, pageHeight);
|
||||||
|
drawRects(tasks, gap, topPadding, sidePadding, barHeight, colorScale, pageWidth, pageHeight);
|
||||||
|
vertLabels(gap, topPadding, sidePadding, barHeight, colorScale);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h) {
|
||||||
|
|
||||||
|
var bigRects = svg.append("g")
|
||||||
|
.selectAll("rect")
|
||||||
|
.data(theArray)
|
||||||
|
.enter()
|
||||||
|
.append("rect")
|
||||||
|
.attr("x", 0)
|
||||||
|
.attr("y", function (d, i) {
|
||||||
|
return i * theGap + theTopPad - 2;
|
||||||
|
})
|
||||||
|
.attr("width", function (d) {
|
||||||
|
return w - theSidePad / 2;
|
||||||
|
})
|
||||||
|
.attr("height", theGap)
|
||||||
|
.attr("stroke", "none")
|
||||||
|
.attr("fill", function (d) {
|
||||||
|
for (var i = 0; i < categories.length; i++) {
|
||||||
|
if (d.type == categories[i]) {
|
||||||
|
return d3.rgb(theColorScale(i));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} else{
|
})
|
||||||
return d[1]*theGap/2 + theTopPad;
|
.attr("opacity", 0.2);
|
||||||
}
|
|
||||||
})
|
|
||||||
.attr("font-size", 11)
|
var rectangles = svg.append('g')
|
||||||
.attr("text-anchor", "start")
|
.selectAll("rect")
|
||||||
.attr("text-height", 14)
|
.data(theArray)
|
||||||
.attr("fill", function(d){
|
.enter();
|
||||||
for (var i = 0; i < categories.length; i++){
|
|
||||||
if (d[0] == categories[i]){
|
|
||||||
// console.log("true!");
|
var innerRects = rectangles.append("rect")
|
||||||
return d3.rgb(theColorScale(i)).darker();
|
.attr("rx", 3)
|
||||||
|
.attr("ry", 3)
|
||||||
|
.attr("x", function (d) {
|
||||||
|
return timeScale(dateFormat.parse(d.startTime)) + theSidePad;
|
||||||
|
})
|
||||||
|
.attr("y", function (d, i) {
|
||||||
|
return i * theGap + theTopPad;
|
||||||
|
})
|
||||||
|
.attr("width", function (d) {
|
||||||
|
return (timeScale(dateFormat.parse(d.endTime)) - timeScale(dateFormat.parse(d.startTime)));
|
||||||
|
})
|
||||||
|
.attr("height", theBarHeight)
|
||||||
|
.attr("stroke", "none")
|
||||||
|
.attr("fill", function (d) {
|
||||||
|
for (var i = 0; i < categories.length; i++) {
|
||||||
|
if (d.type == categories[i]) {
|
||||||
|
return d3.rgb(theColorScale(i));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var rectText = rectangles.append("text")
|
||||||
|
.text(function (d) {
|
||||||
|
return d.task;
|
||||||
|
})
|
||||||
|
.attr("x", function (d) {
|
||||||
|
return (timeScale(dateFormat.parse(d.endTime)) - timeScale(dateFormat.parse(d.startTime))) / 2 + timeScale(dateFormat.parse(d.startTime)) + theSidePad;
|
||||||
|
})
|
||||||
|
.attr("y", function (d, i) {
|
||||||
|
return i * theGap + 14 + theTopPad;
|
||||||
|
})
|
||||||
|
.attr("font-size", 11)
|
||||||
|
.attr("text-anchor", "middle")
|
||||||
|
.attr("text-height", theBarHeight)
|
||||||
|
.attr("fill", "#fff");
|
||||||
|
|
||||||
|
|
||||||
|
rectText.on('mouseover', function (e) {
|
||||||
|
// console.log(this.x.animVal.getItem(this));
|
||||||
|
var tag = "";
|
||||||
|
|
||||||
|
if (typeof d3.select(this).data()[0].details !== 'undefined') {
|
||||||
|
tag = "Task: " + d3.select(this).data()[0].task + "<br/>" +
|
||||||
|
"Type: " + d3.select(this).data()[0].type + "<br/>" +
|
||||||
|
"Starts: " + d3.select(this).data()[0].startTime + "<br/>" +
|
||||||
|
"Ends: " + d3.select(this).data()[0].endTime + "<br/>" +
|
||||||
|
"Details: " + d3.select(this).data()[0].details;
|
||||||
|
} else {
|
||||||
|
tag = "Task: " + d3.select(this).data()[0].task + "<br/>" +
|
||||||
|
"Type: " + d3.select(this).data()[0].type + "<br/>" +
|
||||||
|
"Starts: " + d3.select(this).data()[0].startTime + "<br/>" +
|
||||||
|
"Ends: " + d3.select(this).data()[0].endTime;
|
||||||
}
|
}
|
||||||
|
var output = document.getElementById("tag");
|
||||||
|
|
||||||
|
var x = this.x.animVal.getItem(this) + "px";
|
||||||
|
var y = this.y.animVal.getItem(this) + 25 + "px";
|
||||||
|
|
||||||
|
output.innerHTML = tag;
|
||||||
|
output.style.top = y;
|
||||||
|
output.style.left = x;
|
||||||
|
output.style.display = "block";
|
||||||
|
}).on('mouseout', function () {
|
||||||
|
var output = document.getElementById("tag");
|
||||||
|
output.style.display = "none";
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
|
||||||
|
innerRects.on('mouseover', function (e) {
|
||||||
|
//console.log(this);
|
||||||
|
var tag = "";
|
||||||
|
|
||||||
|
if (typeof d3.select(this).data()[0].details !== 'undefined') {
|
||||||
|
tag = "Task: " + d3.select(this).data()[0].task + "<br/>" +
|
||||||
|
"Type: " + d3.select(this).data()[0].type + "<br/>" +
|
||||||
|
"Starts: " + d3.select(this).data()[0].startTime + "<br/>" +
|
||||||
|
"Ends: " + d3.select(this).data()[0].endTime + "<br/>" +
|
||||||
|
"Details: " + d3.select(this).data()[0].details;
|
||||||
|
} else {
|
||||||
|
tag = "Task: " + d3.select(this).data()[0].task + "<br/>" +
|
||||||
|
"Type: " + d3.select(this).data()[0].type + "<br/>" +
|
||||||
|
"Starts: " + d3.select(this).data()[0].startTime + "<br/>" +
|
||||||
|
"Ends: " + d3.select(this).data()[0].endTime;
|
||||||
|
}
|
||||||
|
var output = document.getElementById("tag");
|
||||||
|
|
||||||
|
var x = (this.x.animVal.value + this.width.animVal.value / 2) + "px";
|
||||||
|
var y = this.y.animVal.value + 25 + "px";
|
||||||
|
|
||||||
|
output.innerHTML = tag;
|
||||||
|
output.style.top = y;
|
||||||
|
output.style.left = x;
|
||||||
|
output.style.display = "block";
|
||||||
|
}).on('mouseout', function () {
|
||||||
|
var output = document.getElementById("tag");
|
||||||
|
output.style.display = "none";
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function makeGrid(theSidePad, theTopPad, w, h) {
|
||||||
|
|
||||||
|
var xAxis = d3.svg.axis()
|
||||||
|
.scale(timeScale)
|
||||||
|
.orient('bottom')
|
||||||
|
.ticks(d3.time.weeks, 5)
|
||||||
|
.tickSize(-h + theTopPad + 20, 0, 0)
|
||||||
|
.tickFormat(d3.time.format('%d %b'));
|
||||||
|
|
||||||
|
var grid = svg.append('g')
|
||||||
|
.attr('class', 'grid')
|
||||||
|
.attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')')
|
||||||
|
.call(xAxis)
|
||||||
|
.selectAll("text")
|
||||||
|
.style("text-anchor", "middle")
|
||||||
|
.attr("fill", "#000")
|
||||||
|
.attr("stroke", "none")
|
||||||
|
.attr("font-size", 10)
|
||||||
|
.attr("dy", "1em");
|
||||||
|
}
|
||||||
|
|
||||||
|
function vertLabels(theGap, theTopPad, theSidePad, theBarHeight, theColorScale) {
|
||||||
|
var numOccurances = [];
|
||||||
|
var prevGap = 0;
|
||||||
|
|
||||||
|
for (var i = 0; i < categories.length; i++) {
|
||||||
|
numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered)];
|
||||||
|
}
|
||||||
|
|
||||||
|
var axisText = svg.append("g") //without doing this, impossible to put grid lines behind text
|
||||||
|
.selectAll("text")
|
||||||
|
.data(numOccurances)
|
||||||
|
.enter()
|
||||||
|
.append("text")
|
||||||
|
.text(function (d) {
|
||||||
|
return d[0];
|
||||||
|
})
|
||||||
|
.attr("x", 10)
|
||||||
|
.attr("y", function (d, i) {
|
||||||
|
if (i > 0) {
|
||||||
|
for (var j = 0; j < i; j++) {
|
||||||
|
prevGap += numOccurances[i - 1][1];
|
||||||
|
// console.log(prevGap);
|
||||||
|
return d[1] * theGap / 2 + prevGap * theGap + theTopPad;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return d[1] * theGap / 2 + theTopPad;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.attr("font-size", 11)
|
||||||
|
.attr("text-anchor", "start")
|
||||||
|
.attr("text-height", 14)
|
||||||
|
.attr("fill", function (d) {
|
||||||
|
for (var i = 0; i < categories.length; i++) {
|
||||||
|
if (d[0] == categories[i]) {
|
||||||
|
// console.log("true!");
|
||||||
|
return d3.rgb(theColorScale(i)).darker();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
//from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript
|
//from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript
|
||||||
function checkUnique(arr) {
|
function checkUnique(arr) {
|
||||||
var hash = {}, result = [];
|
var hash = {}, result = [];
|
||||||
for ( var i = 0, l = arr.length; i < l; ++i ) {
|
for (var i = 0, l = arr.length; i < l; ++i) {
|
||||||
if ( !hash.hasOwnProperty(arr[i]) ) { //it works with objects! in FF, at least
|
if (!hash.hasOwnProperty(arr[i])) { //it works with objects! in FF, at least
|
||||||
hash[ arr[i] ] = true;
|
hash[arr[i]] = true;
|
||||||
result.push(arr[i]);
|
result.push(arr[i]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
return result;
|
||||||
}
|
}
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
//from this stackexchange question: http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array
|
//from this stackexchange question: http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array
|
||||||
function getCounts(arr) {
|
function getCounts(arr) {
|
||||||
var i = arr.length, // var to loop over
|
var i = arr.length, // var to loop over
|
||||||
obj = {}; // obj to store results
|
obj = {}; // obj to store results
|
||||||
while (i) obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
|
while (i) obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
|
||||||
return obj;
|
return obj;
|
||||||
}
|
}
|
||||||
|
|
||||||
// get specific from everything
|
// get specific from everything
|
||||||
function getCount(word, arr) {
|
function getCount(word, arr) {
|
||||||
return getCounts(arr)[word] || 0;
|
return getCounts(arr)[word] || 0;
|
||||||
}
|
}
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user