JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>D3 - Grid axis lines</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
    <style type="text/css">


    </style>
  </head>
  <body>
      <div id="rect-demo" />
    <script type="text/javascript">

var x = d3.scale.linear()
    .domain([0, 450])
    .range([0, 450]);

var y = d3.scale.linear()
     .domain([0,300])
     .range([0, 300]);

var chart = d3.select("body").append("svg")
    .attr("class", "chart")
    .attr("width", 490)
    .attr("height", 320)
  .append("g")
    .attr("transform", "translate(20,15)");

chart.selectAll("line.x")
    .data(x.ticks(10))
  .enter().append("line")
    .attr("class", "x")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", 0)
    .attr("y2", 300)
    .style("stroke", "#ccc");

chart.selectAll("line.y")
    .data(y.ticks(10))
  .enter().append("line")
    .attr("class", "y")
    .attr("x1", 0)
    .attr("x2", 450)
    .attr("y1", y)
    .attr("y2", y)
    .style("stroke", "#ccc");

chart.selectAll(".rule")
    .data(x.ticks(10))
  .enter().append("text")
    .attr("x", x)
    .attr("y", 0)
    .attr("dy", -3)
    .attr("text-anchor", "middle")
    .text(String);

chart.selectAll(".rule")
    .data(y.ticks(10))
  .enter().append("text")
    .attr("x", 0)
    .attr("y", y)
    .attr("dy", 3)
    .attr("dx", -3)
    .attr("text-anchor", "end")
    .text(function(d) { return d == 0 ? '' : d;});

chart.append("line")
    .attr("y1", 0)
    .attr("y2", 300)
    .style("stroke", "#000");

chart.append("line")
    .attr("x1", 0)
    .attr("x2", 450)
    .style("stroke", "#000");
    </script>
  </body>
</html>