https://github.com/jkutianski/d3-templating
D3js plugin to support templating engines as Handlebars, Mustache, Twitter Hogan, Mozilla Nunjucks, LinkedIn Dust, doT, Underscore, Template7, EJS, Vash, ART, Swig, Wiskers and probably others.
https://github.com/jkutianski/d3-templating
d3-module d3js d3v3 d3v4 d4v2 handlebarsjs hogan mustache mustache-js node nodejs template
Last synced: about 1 month ago
JSON representation
D3js plugin to support templating engines as Handlebars, Mustache, Twitter Hogan, Mozilla Nunjucks, LinkedIn Dust, doT, Underscore, Template7, EJS, Vash, ART, Swig, Wiskers and probably others.
- Host: GitHub
- URL: https://github.com/jkutianski/d3-templating
- Owner: jkutianski
- License: bsd-3-clause
- Created: 2017-12-15T16:28:58.000Z (over 7 years ago)
- Default Branch: d3v4
- Last Pushed: 2020-09-23T15:03:02.000Z (over 4 years ago)
- Last Synced: 2025-03-26T02:04:23.680Z (about 2 months ago)
- Topics: d3-module, d3js, d3v3, d3v4, d4v2, handlebarsjs, hogan, mustache, mustache-js, node, nodejs, template
- Language: JavaScript
- Homepage:
- Size: 38.1 KB
- Stars: 10
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
d3-templating
==========
[](https://www.codacy.com/app/jkutianski/d3-templating?utm_source=github.com&utm_medium=referral&utm_content=jkutianski/d3-templating&utm_campaign=Badge_Grade)
[](https://david-dm.org/jkutianski/d3-templating)
[](https://david-dm.org/jkutianski/d3-templating?type=dev)
[](https://snyk.io/test/github/jkutianski/d3-templating?targetFile=package.json)
*(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](http://bl.ocks.org/jkutianski/7556191) of [John Berryman's attempt](http://bl.ocks.org/JnBrymn/2295155) to use templating.
This version support template compilation engines as [`Handlebars`](http://handlebarsjs.com/), [`Mustache`](https://mustache.github.io/), [`Twitter Hogan`](http://twitter.github.io/hogan.js/), [`Mozilla Nunjucks`](https://mozilla.github.io/nunjucks/), [`LinkedIn Dust`](http://www.dustjs.com/), [`doT`](https://olado.github.io/doT/), [`Underscore`](http://underscorejs.org/#template), [`Template7`](http://idangero.us/template7/), [`EJS`](http://ejs.co/), [`Vash`](https://github.com/kirbysayshi/vash), [`ART`](https://aui.github.io/art-template/), [`Swig`](http://node-swig.github.io/swig-templates/), [`Wiskers`](https://github.com/gsf/whiskers.js), [`BlueImp Templates`](https://blueimp.github.io/JavaScript-Templates/), [`Braket`](https://github.com/danlevan/bracket-template), [`Templayed`](https://github.com/archan937/templayed.js/) and probably others.
[D3js Clock DEMO](http://bl.ocks.org/jkutianski/0601ad01f560d49a5967)
Install
-------
To install via NPM use `npm install d3-templating`. You can also load directly from [unpkg.com](https://unpkg.com/d3-templating/).
```html
```
Template
--------
*If the template is an SVG you've to add the tag ``, like the following example.*
```
{{data}}
```
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);
})
);
```