javascript - d3 grid lines, have done some research but still stuck -


i teaching myself d3. have read through tutorials scott murray , reading through d3 tips , tricks , have looked through stackoverflow. read "proper way draw gridlines, among others. when have question answer here. stuck, due inexperience, , have fiddle:

fiddle demo

here snippet copied "proper way draw gridlines":

    svg.selectall("circle")    .data(yscale.ticks())    .enter()     .append("circle")        .attr("x1", margin.right)        .attr("x2", width)           .attr("y1", function(d){          return yscale(d[2]);             })        .attr("y2", function(d){          return yscale(d[2]);         })        .attr("fill", "none")        .attr("shape-rendering", "crispedges")        .attr("stroke", "black")        .attr("stroke-width", "1px"); 

i love draw grid lines across y axis , x axis, figured i'd 1 thing @ time.

i've tried using .ticksize(), i've created make_y_axis function, missing something. advice (or shove in right direction) appreciated.

i suggest use d3.svg.axis().scale() tie grid coordinates. drew quick example based on code: http://jsfiddle.net/9udmc/3/

enter image description here

the gist use existing scales, x , y, , use ticks grid. since yaxis , xaxis defined can re-use them. here relevant code:

//draw grid var yaxisgrid = yaxis   .ticksize(width, 0)   .tickformat("")   .orient("right")  var xaxisgrid = xaxis   .ticksize(-height, 0)   .tickformat("")   .orient("top")  svg.append("g")   .classed('y', true)   .classed('axis', true)   .call(yaxisgrid)  svg.append("g")   .classed('x', true)   .classed('axis', true)   .call(xaxisgrid) 

Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -