renderLinks()

in src/vis/SentenTreeVis.js [97:134]

• 30 lines of code
• 2 McCabe index (conditional complexity)

  renderLinks(graphs) {
    const sUpdate = this.layers.get('link').selectAll('g.graph')
      .data(graphs);

    sUpdate.exit().remove();

    const sEnter = sUpdate.enter().append('g')
      .classed('graph', true);

    this.sLinkGraphs = sUpdate.merge(sEnter)
      .attr('transform', `translate(${this.getInnerWidth() / 2},${this.getInnerHeight() / 2})`);

    const sUpdateLink = sEnter.selectAll('path.link')
      .data(d => d.links, l => l.getKey());

    sUpdateLink.exit().remove();

    sUpdateLink.enter().append('path')
      .classed('link', true)
      .on('click.event', this.dispatchAs('linkClick'))
      .on('mouseenter.event', this.dispatchAs('linkMouseenter'))
      .on('mousemove.event', this.dispatchAs('linkMousemove'))
      .on('mouseleave.event', this.dispatchAs('linkMouseleave'))
      .style('vector-effect', 'non-scaling-stroke')
      .style('opacity', 0.5)
      .style('stroke', '#222')
      .style('fill', 'none');

    graphs.forEach(graph => {
      graph.links.forEach(link => {
        link.strokeWidth = Math.round(this.strokeSizeScale(link.freq / graph.minSupport));
      });
    });

    this.sLinks = this.layers.get('link').selectAll('path.link')
      .style('stroke-width', d => `${d.strokeWidth}px`)
      .style('stroke', l => (l.isTheOnlyBridge() ? '#777' : '#FF9800'));
  }