title: adding a text beside a line (like label) in d3js
body: <p>I have a normal line in d3js where we need to add some text beside it to show its length.</p>
  <p>Reference image:
  <a href="https://i.stack.imgur.com/jgXdE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jgXdE.png" alt="enter image description here" /></a></p>
  <p>code:</p>
  <pre><code>var x_onCircle1 = this.originX + this.outerCircleRadius * Math.cos(120 * Math.PI / 180);
      var y_onCircle1 = this.originY + this.outerCircleRadius * Math.sin(120 * Math.PI / 180);
  
      var x_onCircle2 = 2 * this.originX - x_onCircle1;
      var y_onCircle2 = 2 * this.originY - y_onCircle1;
  
   this.svg.append('line')
        .attr('x1', x_onCircle1)
        .attr('y1', y_onCircle1)
        .attr('x2', x_onCircle2)
        .attr('y2', y_onCircle2)
        .attr('marker-start', 'url(#arrow)')
        .attr('marker-end', 'url(#arrow)')
        .attr('stroke', 'black');
  </code></pre>
  <p>How can we add that text?</p>