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:
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/
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
Post a Comment