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);

https://groups.google.com/forum/#!topic/d3-js/e3RjP1gITHM

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");

drawAxis(bottomLayer,dim,xScale)

function drawAxis(svgLayer, svgDimensions, scale, configurations)
{
    function customTicks(datum,interval)
    {    
        return (interval % 2 == 0)?-20 : 5;
    }
    
    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");
    
    var ticks = axisGroup.selectAll("line")
                .attr("class","ticks");
    
    console.log(_.pluck(svgLayer.selectAll("line"),"x2"));
    
    svgLayer.selectAll("line").data(ticks).enter()
			.append("line")
			.attr(
			{
				"x1": ,
				"x2": ,
				"y1": -2,
				"stroke": "#d8d8d8"
			});

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