i want x-axis this:
until have this:
var margin = {top: 10, right: 10, bottom: 50, left: 30}, width = 800 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; padding = 30; var svg = d3.select("#chart") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var dataset = [ [ new date(2015,1,1), 800, new date(2015,8,1), 0 ], [ new date(2015,2,1), 800, new date(2015,9,1), 0 ], [ new date(2015,3,1), 800, new date(2015,10,1), 0 ], [ new date(2015,4,1), 800, new date(2015,11,1), 0 ], [ new date(2015,5,1), 800, new date(2015,12,1), 0 ], [ new date(2015,6,1), 800, new date(2016,1,1), 0 ] ]; var min = d3.min(dataset, function(d) { return d[0]; }); var max = d3.max(dataset, function(d) { return d[2]; }); var monthformat = d3.time.format("%b"); var yearformat = d3.time.format("%y"); var xscale = d3.time.scale() .domain([min, max]) .range([0, width]); var xaxis1 = d3.svg.axis() .scale(xscale) .tickformat(monthformat) .ticksize(5,0) .orient("bottom"); var xaxis2 = d3.svg.axis() .scale(xscale) .ticks(d3.time.years, 1) .tickformat(yearformat) .ticksize(5,0) .orient("bottom"); svg.append("g") .attr("class", "axis") .attr("transform", "translate(20," + (height - padding) + ")") .call(xaxis1); svg.append("g") .attr("class", "axis") .attr("transform", "translate(20," + (height + 10) + ")") .call(xaxis2); var year = 2015; d3.selectall("g.axis g.tick line") .attr("y2", function(d){ if (year != d.getfullyear()) { return 15; } else { return 5; } year = d.getfullyear(); }); but needs lot more.
- it possible in d3?
- can give me tips achieve this?
- is there similar example can use?
Comments
Post a Comment