Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 14, 2016 02:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/e791ed6df7b9fe863c79160affcad0b9 to your computer and use it in GitHub Desktop.
Save anonymous/e791ed6df7b9fe863c79160affcad0b9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/hikudu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<svg id="legend"></svg>
<script id="jsbin-javascript">
"use strict";
var width = 300;
var height = 1900;
var margin = 5;
var chartKeys = ["1 successful", "2 next", "3 unscheduled", "4 partial", "5 failed"];
var colors = d3.scale.category10();
var svg = d3.select('#legend').attr({
width: width,
height: height
}).append('g').attr('transform', 'translate(' + margin + ',' + margin + ')');
var legend = svg.selectAll('.legend').data(chartKeys);
var offset = 0;
var legendBlockWidth = 15;
var textMargin = 5;
var row = 0;
var rowHeight = 25;
var rowNumber = 1;
var innerWidth = width - 10;
legend.enter().append('g').attr('class', 'legend').each(function (key, i) {
var item = d3.select(this);
var text = item.append('text').attr('transform', 'translate(' + [legendBlockWidth + textMargin, legendBlockWidth].join(',') + ')').text(key);
// var nextText = item.append('text')
// .attr('transform',
// 'translate(' + [ legendBlockWidth + textMargin, legendBlockWidth].join(',') + ')')
// .text(chartKeys[i+1]);
item.append('rect').attr({
width: legendBlockWidth,
height: legendBlockWidth,
fill: colors(key),
stroke: 'black',
'stroke-width': 1
});
// item.attr('transform', function() {
// return `translate(${offset}, ${row})`;
// });
var itemWidth = text.node().getBBox().width + legendBlockWidth + textMargin * 3;
// console.log(`Next Size: ${itemWidth}`);
// console.log(`Before: ${offset}`);
if (innerWidth < offset + itemWidth) {
// console.log(`ESTOUROU ${key}`);
row += rowHeight;
offset = 0;
rowNumber += 1;
item.attr('transform', function () {
return "translate(" + offset + ", " + rowHeight * rowNumber + ")";
});
} else {
item.attr('transform', function () {
return "translate(" + offset + ", " + rowHeight * rowNumber + ")";
});
}
offset += itemWidth;
// Update the offset
console.log("Row Number " + rowNumber);
// console.log(`After: ${offset}`);
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var width = 300;
var height = 1900;
var margin = 5;
var chartKeys = [
"1 successful",
"2 next",
"3 unscheduled",
"4 partial",
"5 failed",
];
var colors = d3.scale.category10();
var svg = d3.select('#legend')
.attr({
width: width,
height: height
})
.append('g')
.attr('transform', 'translate(' + margin + ',' + margin + ')');
var legend = svg.selectAll('.legend').data(chartKeys);
var offset = 0;
var legendBlockWidth = 15;
var textMargin = 5;
var row = 0;
var rowHeight = 25;
var rowNumber = 1;
var innerWidth = width - 10;
legend.enter()
.append('g')
.attr('class', 'legend')
.each(function(key, i) {
var item = d3.select(this);
var text = item.append('text')
.attr('transform',
'translate(' + [ legendBlockWidth + textMargin, legendBlockWidth].join(',') + ')')
.text(key);
// var nextText = item.append('text')
// .attr('transform',
// 'translate(' + [ legendBlockWidth + textMargin, legendBlockWidth].join(',') + ')')
// .text(chartKeys[i+1]);
item.append('rect')
.attr({
width: legendBlockWidth,
height: legendBlockWidth,
fill: colors(key),
stroke: 'black',
'stroke-width': 1
});
// item.attr('transform', function() {
// return `translate(${offset}, ${row})`;
// });
let itemWidth = text.node().getBBox().width + legendBlockWidth + textMargin * 3;
// console.log(`Next Size: ${itemWidth}`);
// console.log(`Before: ${offset}`);
if(innerWidth < (offset + itemWidth)) {
// console.log(`ESTOUROU ${key}`);
row += rowHeight;
offset = 0;
rowNumber += 1;
item.attr('transform', function() {
return `translate(${offset}, ${rowHeight * rowNumber})`;
});
} else {
item.attr('transform', function() {
return `translate(${offset}, ${rowHeight * rowNumber})`;
});
}
offset += itemWidth;
// Update the offset
console.log(`Row Number ${rowNumber}`);
// console.log(`After: ${offset}`);
});
</script></body>
</html>
Raw
jsbin.hikudu.js
"use strict";
var width = 300;
var height = 1900;
var margin = 5;
var chartKeys = ["1 successful", "2 next", "3 unscheduled", "4 partial", "5 failed"];
var colors = d3.scale.category10();
var svg = d3.select('#legend').attr({
width: width,
height: height
}).append('g').attr('transform', 'translate(' + margin + ',' + margin + ')');
var legend = svg.selectAll('.legend').data(chartKeys);
var offset = 0;
var legendBlockWidth = 15;
var textMargin = 5;
var row = 0;
var rowHeight = 25;
var rowNumber = 1;
var innerWidth = width - 10;
legend.enter().append('g').attr('class', 'legend').each(function (key, i) {
var item = d3.select(this);
var text = item.append('text').attr('transform', 'translate(' + [legendBlockWidth + textMargin, legendBlockWidth].join(',') + ')').text(key);
// var nextText = item.append('text')
// .attr('transform',
// 'translate(' + [ legendBlockWidth + textMargin, legendBlockWidth].join(',') + ')')
// .text(chartKeys[i+1]);
item.append('rect').attr({
width: legendBlockWidth,
height: legendBlockWidth,
fill: colors(key),
stroke: 'black',
'stroke-width': 1
});
// item.attr('transform', function() {
// return `translate(${offset}, ${row})`;
// });
var itemWidth = text.node().getBBox().width + legendBlockWidth + textMargin * 3;
// console.log(`Next Size: ${itemWidth}`);
// console.log(`Before: ${offset}`);
if (innerWidth < offset + itemWidth) {
// console.log(`ESTOUROU ${key}`);
row += rowHeight;
offset = 0;
rowNumber += 1;
item.attr('transform', function () {
return "translate(" + offset + ", " + rowHeight * rowNumber + ")";
});
} else {
item.attr('transform', function () {
return "translate(" + offset + ", " + rowHeight * rowNumber + ")";
});
}
offset += itemWidth;
// Update the offset
console.log("Row Number " + rowNumber);
// console.log(`After: ${offset}`);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment