renderNodes()

in src/vis/SentenTreeVis.js [62:95]


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

    sUpdate.exit().remove();

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

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

    const sUpdateNode = sEnter.selectAll('g')
      .data(d => d.nodes, n => n.id);

    sUpdateNode.exit().remove();

    sUpdateNode.enter().append('g')
      .classed('node', true)
      .on('click.event', this.dispatchAs('nodeClick'))
      .on('mouseenter.event', this.dispatchAs('nodeMouseenter'))
      .on('mousemove.event', this.dispatchAs('nodeMousemove'))
      .on('mouseleave.event', this.dispatchAs('nodeMouseleave'))
    .append('text')
      .attr('dy', '.28em')
      .text(d => d.data.entity)
      .style('cursor', 'pointer');

    this.sNodes = this.layers.get('node').selectAll('g.node');

    this.sNodes.select('text')
      .style('font-size', d => this.fontSize(d))
      .style('text-anchor', 'middle');
  }