JSFiddle - React, Tailwind, and code Playground

by Blake Dietz

HTML

<div id="svg-root"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

CSS

xaxisg.selectAll("line").data(x.ticks(64), function(d) { return d; })
  .enter()
  .append("line")
  .attr("class", "minor")
  .attr("y1", 0)
  .attr("y2", -60)
  .attr("x1", x)
  .attr("x2", x);

JavaScript

var dim = {"height":400, "width":300};
var svg = d3.select("#svg-root").append("svg")
                  .attr("width",dim.width)
                  .attr("height",dim.height);

var xScale = d3.scale.linear().domain([0,200]).range([0,dim.width]);

var bottomLayer = svg.append("g").attr("id","bottom-layer");
var topLayer = svg.append("g").attr("id","top-layer");
           
bottomLayer.append("rect")
           .attr("x",0)
           .attr("y",0)
           .attr("height",50)
           .attr("width",50)
           .attr("fill","red");

drawAxis(bottomLayer,dim,xScale)

function drawAxis(svgLayer, svgDimensions, scale, configurations)
{
    var axis = d3.svg.axis().scale(xScale);
    
    var axisGroup = svgLayer.append("g")
        .attr("class","axis")

        .call(axis); 
    
    axisGroup.select("path")
        .attr("fill","none")
        .attr("stroke","black")
        .selectAll("line")
            .attr("y1","0")
            .attr("y2","-20");
    
    var ticks = axisGroup.selectAll("line")
                .attr("class","ticks")
                .attr("shape-rendering","crispEdges")
                .attr("stroke","red");

    var labelSel = svgLayer.selectAll("text")
                    .attr("fill","black");
};