javascript - Moving the axes in d3.js -

i have 2 axes in graph right now, stuck @ left , bottom of graph. want make axes line (0,0) coordinate, or in other words want axes @ x=0 , y=0

here's axes code:

    //setup x var xaxis = d3.svg.axis()     .scale(xrange)     .ticksize(5)     .ticksubdivide(true),      //setup y     yaxis = d3.svg.axis()     .scale(yrange)     .ticksize(5)     .orient("left")     .ticksubdivide(true); 

i thinking way might make smaller svg underneath 1 have, starts @ zero, , put axes there, , remove them 1 have right now.

here's full code: http://jsfiddle.net/v92q26l8/

the key part of code bit attach axes

vis.append("svg:g")     .attr("class", "x axis")     .attr("transform", "translate(0," + (height - margins.bottom) + ")")     .call(xaxis);  vis.append("svg:g")     .attr("class", "y axis")     .attr("transform", "translate(" + (margins.left) + ",0)")     .call(yaxis); 

at moment positioning axes bottom , left using transforms on groups (svg:g nodes) contain them.

to reposition axes need adjust these transforms using defined scales.

for x axis

.attr("transform", "translate(0," + (height - margins.bottom) + ")") 

becomes

.attr("transform", "translate(0," + yrange(0) + ")") 

for y axis

.attr("transform", "translate(" + (margins.left) + ",0)") 

becomes

.attr("transform", "translate(" + xrange(0) + ",0)") 

additionally, may sensible change names of scales. term 'range' has particular meaning in d3, i'd suggest xscale , yscale.

js fiddle