Renderer.md

Docs ▸ Introduction | Development | Demo   ////   API Reference ▸ Force | Node | Renderer

labella.Renderer

Renderer is a utility for drawing the output from labella.

Common usage

var renderer = new labella.Renderer({
  layerGap: 60,
  nodeHeight: 12,
  direction: 'up'
});

function draw(nodes){
  // Add x,y,dx,dy to node
  renderer.layout(nodes);

  // Draw label rectangles
  d3.selectAll('rect.label')
    .data(nodes)
  .enter().append('rect')
    .classed('label', true)
    .attr('x', function(d){ return d.x - d.dx/2; })
    .attr('y', function(d){ return d.y; })
    .attr('width', function(d){ return d.dx; })
    .attr('height', function(d){ return d.dy; });

  // Draw path from point on the timeline to the label rectangle
  d3.selectAll('path.link')
    .data(nodes)
  .enter().append('path')
    .classed('link', true)
    .attr('d', function(d){return renderer.generatePath(d);});
}

Constructor

# var renderer = new labella.Renderer([options: Object]);

There are a few options that you can customize when creating a renderer.

option	default	description
layerGap	60	gap between layer of labels
nodeHeight	12	For horizontal axis, this is the height of each label. For vertical axis, this is the width of each label.
direction	'down'	placement of the label relative to the axis. Choose from 'up', 'down', 'left' or 'right'. Use 'left' or 'right' for vertical axis and 'up' or 'down' for horizontal axis. See example.

Functions

# renderer.generatePath(node:Node)

Generate value for <path> attribute d for given node to draw the route from axis to label.

# renderer.getWaypoints(node:Node)

Return points on the route from axis to label. The returned value is an array of array of points.

[
  [point on the axis],
  [top point on layer1, bottom point on layer1],
  [top point on layer2, bottom point on layer2],
  ...
]

Each point is also an array [x, y].

# renderer.layout(nodes:Array)

Add x, y, dx and dy to each node in the input array.