JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<svg width="600" height="500"><g class="polygon" transform="translate(15.808244743257717,-474.6134300396019) scale(7.086613321786316)"><polygon points="20.60261851238957,70.50101768965078,59.60261851238957,71.00101768965078,59.60261851238957,132.50101768965078,21.60261851238957,134.00101768965078" fill="#1f6055"></polygon><text x="37.248231089437844" y="101.86925648735148" dy=".35em">N1</text></g></svg>

JavaScript

var xScale = d3.scaleLinear()
  .range([0, 100]);
var yScale = d3.scaleLinear()
  .range([0, 100]);

var gridline = fc.annotationSvgGridline()
  .xScale(xScale)
  .yScale(yScale);

container.append("g")
  .call(gridline);