D3 Examples - Simple example of reusable d3 plugin.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>really simple d3 plugin example</title>
</head>
​
<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}
</style>
​
<body>
​
<div id="chart">
</div>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="textblock.js"></script>
<script>
​
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>
​
    