d3-templating

d3-templating
==========



(This version is tested on browsers with D3js v2.x, v3.x and v4.x)
(For Node.js is only supported the D3js v4.x)

d3-templating is based on my previous solution of John Berryman's attempt to use templating.
This version support template compilation engines as Handlebars, Mustache, Twitter Hogan, Mozilla Nunjucks, LinkedIn Dust, doT, Underscore, Template7, EJS, Vash, ART, Swig, Wiskers, BlueImp Templates, Braket, Templayed and probably others.

D3js Clock DEMO

Install
-------
To install via NPM use npm install d3-templating. You can also load directly from unpkg.com.

``html

`

Template
--------
If the template is an SVG you've to add the tag , like the following example.
`

`
How to use
----------

Node.js
-------
`
const
jsdom = require('jsdom'), // JSDOM is required to use D3js
Handlebars = require("handlebars"),
d3 = Object.assign({}, require("d3-selection"), require("d3-templating"));

var dom = new jsdom.JSDOM('');
var body = d3.select(dom.window.document.body);

var template = '';
var compiledTemplate = Handlebars.compile(template);

var svg = body.select('svg');

var g = svg.selectAll('g')
.data([
{ x: 10, y: 10, r: 10 },
{ x: 30, y: 30, r: 20 },
{ x: 60, y: 60, r: 30 },
{ x: 100, y: 100, r: 40 },
])
.enter()
.call(d3.template(compiledTemplate));

console.log(body.html())
`

Handlebars
----------
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = Handlebars.compile(template);

d3.select('#node').call(
d3.template(compiledTemplate)
);
`
Mustache
--------
`
var template = d3.select('#template').node().innerHTML;
Mustache.parse(template);

d3.select('#node').call(
d3.template(
function (d) {
return Mustache.render(template,d);
})
);
`
Twitter Hogan
-------------
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = Hogan.compile(template);

d3.select('#node').call(
d3.template(
function (d) {
return compiledTemplate.render(d);
})
);
`
Mozilla Nunjucks
----------------
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = nunjucks.compile(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate.render(d);
})
);
`
LinkedIn Dust
-------------
`
var template = d3.select('#template').node().innerHTML;
dust.loadSource(dust.compile(template, 'myTemplate'));

d3.select('#node').call(
d3.template(
function(d) {
var output;
dust.render('myTemplate', d, function (err, out) {
output = out;
});
return output;
}
)
);
`
doT
---
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = doT.template(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate(d);
})
);
`
Underscore
----------
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = _.template(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate(d);
})
);
`
Template7
---------
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = Template7.compile(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate(d);
})
);
`
EJS
---
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = ejs.compile(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate(d);
})
);
`
Vash
----
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = vash.compile(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate(d);
})
);
`

ART
----
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = template.compile(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate(d);
})
);
`

Swig
----
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = swig.compile(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate(d);
})
);
`

Wiskers
-------
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = whiskers.compile(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate(d);
})
);
`

BlueImp Templates
----------------
`
d3.select('#node').call(
d3.template(function (d) {
return tmpl('template_id', d);
})
);
`

Bracket
-------
`
var template = d3.select('#template').node().innerHTML;
var compiledTemplate = bracket.compile(template);

d3.select('#node').call(
d3.template(function (d) {
return compiledTemplate(d);
})
);
`

Templayed
---------
`
var template = d3.select('#template').node().innerHTML;

d3.select('#node').call(
d3.template(function (d) {
return templayed(template)(d);
})
);
``