Method draw

js/src/Graph.ts:227–370

()

  }

  draw() {
    this.set_ranges();
    const x_scale = this.scales.x;
    const y_scale = this.scales.y;
    const link_color_scale = this.scales.link_color;

    // clean up the old graph
    this.d3el.selectAll('.node').remove();
    this.d3el.selectAll('.link').remove();

    if (x_scale && y_scale) {
      //set x and y on mark data manually
      this.model.mark_data.forEach((d) => {
        d.x = x_scale.scale(d.xval) + x_scale.offset;
        d.y = y_scale.scale(d.yval) + y_scale.offset;
      });
    }

    const box = this.parent.fig.node().getBBox();
    const width = box.width;
    const height = box.height;
    this.force_layout = d3
      .forceSimulation<NodeData>()
      .force('center', d3.forceCenter(width / 2, height / 2))
      .force(
        'forceX',
        d3
          .forceX()
          .strength(0.1)
          .x(width / 2)
      )
      .force(
        'forceY',
        d3
          .forceY()
          .strength(0.1)
          .y(height / 2)
      );

    if (!x_scale && !y_scale) {
      this.force_layout
        .force('charge', d3.forceManyBody().strength(this.model.get('charge')))
        .on('tick', this.tick.bind(this));
    }

    this.links = this.d3el
      .selectAll('.link')
      .data(this.model.link_data)
      .enter()
      .append('path')
      .attr('class', 'link')
      .style('stroke', (d) => {
        return link_color_scale ? link_color_scale.scale(d.value) : null;
      })
      .style('stroke-width', (d: any) => {
        return d.link_width;
      })
      .attr('marker-end', this.model.directed ? 'url(#arrow)' : null);