Skip to content

Instantly share code, notes, and snippets.

Last active February 9, 2016 01:58
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Clone Templates
license: gpl-3.0

This example demonstrates the use of cloneNode to define templates in HTML markup, modifying the instantiated template after binding to data.

<!DOCTYPE html>
<meta charset="utf-8">
#item-table {
width: 100%;
text-align: left;
<table id="item-table">
<tr class="item">
<td class="name"></td>
<td class="cost"></td>
<td class="count"></td>
<script src="//"></script>
var itemTemplate =".item").remove().node();
var formatCost = d3.format("$,.2f"),
formatCount = d3.format(",d");
d3.tsv("items.tsv", type, function(error, items) {
var item ="#item-table tbody").selectAll(".item")
.enter().append(function() { return itemTemplate.cloneNode(true); });".name").text(function(d) { return; });".cost").text(function(d) { return formatCost(d.cost); });".count").text(function(d) { return formatCount(d.count); });
function type(d) {
d.cost = +d.cost;
d.count = +d.count;
return d;
name cost count
foo 1.23 10
bar 0.12 7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment