Extended from this excellent tutoriall to use d3 reusable pattern so you can have api to call the charts with the same code.
Last active
August 29, 2015 14:20
-
-
Save eesur/fa631d127de737f42258 to your computer and use it in GitHub Desktop.
Reusable lines
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}; | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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