Simple example of reusable d3 plugin.

This as-simple-as-possible example tries to demonstrate Mike Bostock's pattern "Towards Reusable Charts" http://bost.ocks.org/mike/chart/ for d3 plugins that are composite shapes.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>really simple d3 plugin example</title>
</head>

<body>

var items = [
    {x : 50, y : 50, label : 'interesting label'},
    {x : 100, y: 120, label : 'some arb example'},
    {x : 300, y: 100, label : 'the last block'}
];

// we can increase this, everything will scale up with us
var w=960,h=500,
    svg=d3.select("#chart")
        .append("svg")
        .attr("width",w)
        .attr("height",h);

// calling textBlock() returns the function object textBlock().my
// via which we set the "label" property of the textBlock outer func
var tb = d3.textBlock().label(function(d) {return d.label;});
// now we apply the returned function object my == tb on an enter selection
var item = svg.selectAll("rect")
    .data(items)
  .enter()
    .append("svg:g")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(tb);

</script>
  
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js