Skip to content

Instantly share code, notes, and snippets.

@eesur
Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eesur/fa631d127de737f42258 to your computer and use it in GitHub Desktop.
Save eesur/fa631d127de737f42258 to your computer and use it in GitHub Desktop.
Reusable lines
d3.eesur = {}; // sub-namespace to the d3 namespace
d3.eesur.line = function module() { // add a line module
// default variable _values in a closure
var w = 400,
h = 400,
colour = 'black',
x1 = 0,
x2 = 100;
function exports(_selection) {
_selection.each(function(_data) {
var yValue = function (d) {
return d.value;
};
var line = d3.select(this)
.append('svg')
.attr({
width: w,
height: h,
class: 'line-example'
})
.selectAll('line')
.data(_data);
line
.enter()
.append('line')
.attr({
stroke: colour,
x1: x1,
x2: x2,
y1: yValue,
y2: yValue
});
// update code here
// line
line
.exit()
.remove();
});
}
// public api – getters and setters at the same time (will either get a new value or set the default variables)
exports.w = function(_value) {
if (!arguments.length) return w;
w = _value;
return this;
};
exports.h = function(_value) {
if (!arguments.length) return h;
h = _value;
return this;
};
exports.colour = function(_value) {
if (!arguments.length) return colour;
colour = _value;
return this;
};
exports.x1 = function(_value) {
if (!arguments.length) return x1;
x1 = _value;
return this;
};
exports.x2 = function(_value) {
if (!arguments.length) return x2;
x2 = _value;
return this;
};
return exports;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>simple line made reusable</title>
<style>
section {
width: 400px;
max-width: 40%;
display: inline-block;
padding: 4%;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="eesur.js" charset="utf-8"></script>
</head>
<body>
<section id="base"></section>
<section id="base2"></section>
<script>
var dataset1 = [
{ value: 8 },
{ value: 21 },
{ value: 89 }
];
var dataset2 = [
{ value: 21 },
{ value: 34 },
{ value: 55 },
{ value: 89 },
{ value: 144 }
];
var line1 = d3.eesur.line(); // instantiate the chart
line1 // configure any api settings
.x1(0)
.x2(200)
.w(400)
.colour('red');
d3.select('#base') // select the DOM and use D3.js selection.call
.datum(dataset1)
.call(line1);
// add another set of lines
var line2 = d3.eesur.line()
.x2(400)
.w(400)
.colour('green');
d3.select('#base2') // make another chart
.datum(dataset2)
.call(line2);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment