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.

<script src="https://unpkg.com/d3-templating/build/d3-template.min.js"></script>

Template

If the template is an SVG you've to add the tag <svg xmlns="http://www.w3.org/2000/svg">, like the following example.

<template id="template" type="text/html" style="display: none;">
   <svg xmlns="http://www.w3.org/2000/svg"><text>{{data}}</text></svg>
</template>

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('<?xml version="1.0"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" ></svg>');
var body = d3.select(dom.window.document.body);

var template = '<svg xmlns="http://www.w3.org/2000/svg" ><circle cx="{{x}}" cy="{{y}}" r="{{r}}"/></svg>';
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);
    })
);