Label layout example

A demonstration of the d3fc-label-layout component.

<!DOCTYPE html>

<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

// create the layout that positions the labels
  const labels = fc.layoutLabel(strategy)
    .size((d, i, g) => {
      // measure the label and add the required padding
      const textSize = g[i].getElementsByTagName('text')[0].getBBox();
      return [
        textSize.width,
        textSize.height
      ];
    })
    .position((d) => {
      return [
        d.users,
				d.orgs
      ]
    })
    .component(textLabel);
 
  
  const yExtent = fc.extentLinear()
    .accessors([d => d.orgs])
  	.pad([0.1, 0.1]);
 
  const xExtent = fc.extentLinear()
    .accessors([d => d.users])
    .pad([0.05, 0.2]);
  
  // create a chart
  const chart = fc.chartSvgCartesian(
      d3.scaleLinear(),
      d3.scaleLinear())
    .yDomain(yExtent(scatter))
    .xDomain(xExtent(scatter))
    .yOrient('left')
    .xLabel('GitHub Users')
    .yLabel('GitHub Organisations')
    .chartLabel('GitHub Organizations vs. Individuals')
		.plotArea(labels);

// render
  d3.select('#chart')
    .datum(scatter)
    .call(chart);
});
</script>

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://unpkg.com/d3@4.6.0

https://unpkg.com/d3fc@13.1.1