text example

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .dot {fill: IndianRed; stroke: LimeGreen; stroke-width: 3px}
    .dot:hover {r: 12; stroke-width: 5px}
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
var holder = d3.select("body")
	.append("svg")
	.attr("width",450)
	.attr("height",400);
    
holder.append("text")
	.attr("x",150)
	.attr("y",150)
	.attr("text-anchor","start")
	.text("Hi there, this is the start.")

holder.append("text")
	.attr("x",150)
	.attr("y",165)
	.attr("dx","2em")
	.attr("text-anchor","middle")
	.text("Hi there, this is the middle.")

holder.append("text")
	.attr("x",150)
	.attr("y",180)
	.attr("dx","2em")
	.attr("text-anchor","end")
	.text("Hi there, this is the end.")

holder.append("polyline")
	.style("stroke","MidnightBlue")
	.style("fill","none")
	.attr("stroke-width","3px")
	.attr("points"," 100,50, 200,120, 300,100, 350,200, 425,300 ")

holder.append("circle")
	.attr("cx",200)
	.attr("cy",300)
	.attr("class","dot")
	.attr("r",5);

</script>
</body>

https://d3js.org/d3.v4.min.js