How to use labella - 7 common examples

? size[1] - axisMarginOverride.bottom
          : size[1] + margin.bottom
      })
        .nodes(
          rightNodes.map(d => {
            const noteY = d.props.noteData.y[0] || d.props.noteData.y
            return new labella.Node(
              noteY,
              noteDataHeight(d.props.noteData, characterWidth, lineHeight) +
                padding
            )
          })
        )
        .compute()

      const topForce = new labella.Force({
        minPos: axisMarginOverride.left !== undefined
          ? 0 + axisMarginOverride.left
          : leftOn
          ? 0
          : 0 - margin.left,
        maxPos: axisMarginOverride.right !== undefined
          ? size[0] - axisMarginOverride.right
          : size[0] + margin.right
      })
        .nodes(
          topNodes.map(d => {
            const noteX = d.props.noteData.x[0] || d.props.noteData.x
            return new labella.Node(
              noteX,
              noteDataWidth(d.props.noteData, characterWidth) + padding
            )

constructor(element, options) {
    super(element, options);

    this.layers.create(['dummy', {main:['axis', 'link', 'label', 'dot']}]);
    this.layers.get('main/axis').classed('axis', true);

    this.force = new labella.Force(options.labella);

    this.updateLabelText = this.updateLabelText.bind(this);
    this.visualize = this.visualize.bind(this);
    this.on('data', this.visualize);
    this.on('options', this.visualize);
    this.on('resize', this.visualize);
  }

visualize() {
    if (!this.hasData() || !this.hasNonZeroArea()) return;

    const data = this.data() || [];
    const options = this.options();
    this.force = new labella.Force(options.labella);

    if(options.domain){
      options.scale.domain(options.domain);
    }
    else{
      options.scale
        .domain(extent(data, options.timeFn))
        .nice();
    }
    options.scale.range([0, (options.direction==='left' || options.direction==='right')
      ? this.getInnerHeight()
      : this.getInnerWidth()]
    );

    const labelTextStyle = helper.extend({}, options.textStyle);
    Object.keys(labelTextStyle).forEach(key => {

topNodes.map(d => {
            const noteX = d.props.noteData.x[0] || d.props.noteData.x
            return new labella.Node(
              noteX,
              noteDataWidth(d.props.noteData, characterWidth) + padding
            )
          })
        )

leftNodes.map(d => {
            const noteY = d.props.noteData.y[0] || d.props.noteData.y
            return new labella.Node(
              noteY,
              noteDataHeight(d.props.noteData, characterWidth, lineHeight) +
                padding
            )
          })
        )

const nodes = data.map(d => {
      const bbox = dummyText
        .call(this.updateLabelText, labelTextStyle, d)
        .node()
        .getBBox();
      const w = bbox.width + options.labelPadding.left + options.labelPadding.right;
      const h = bbox.height + options.labelPadding.top + options.labelPadding.bottom;
      const node = new labella.Node(
        timePos(d),
        (options.direction==='left' || options.direction==='right') ? h : w,
        d
      );
      node.w = w;
      node.h = h;
      return node;
    });

drawLabels(nodes, labelTextStyle) {
    const options = this.options();
    let nodeHeight;
    if(options.direction==='left' || options.direction==='right'){
      nodeHeight = max(nodes, rectWidth);
    }
    else{
      nodeHeight = max(nodes, rectHeight);
    }

    const renderer = new labella.Renderer({
      nodeHeight,
      layerGap: options.layerGap,
      direction: options.direction
    });

    renderer.layout(nodes);

    function nodePos(d){
      switch(options.direction){
        case 'right':
          return 'translate('+(d.x)+','+(d.y-d.dy/2)+')';
        case 'left':
          return 'translate('+(d.x + nodeHeight - d.w)+','+(d.y-d.dy/2)+')';
        case 'up':
          return 'translate('+(d.x-d.dx/2)+','+(d.y)+')';
        case 'down':