Major and minor ticks with different style, whole page covered D3?

Question

I want to draw an axis with major and minor ticks that cover my whole page styled differently. I followed structure of this example, but I can\'t get it to work make different b

Answer 1

I have made the change to your fiddle, please see here http://jsfiddle.net/17ubhxqw/1/

All you have to do is figure out at which interval you want the darker line and return a different color in your x and y grid declarations:

// Draw X-axis grid lines
            chart.selectAll("line.x")
              .data(x.ticks(50))
              .enter().append("line")
              .attr("class", "minor")
              .attr("x1", x)
              .attr("x2", x)
              .attr("y1", 0)
              .attr("y2", 300)
            .style("stroke", function(d,i){
                if (d%50 !== 0) {
                    return "#ccc";
                }else {
                    return "#666";
                }
            });

            // Draw Y-axis grid lines
            chart.selectAll("line.y")
              .data(y.ticks(50))
              .enter().append("line")
              .attr("class", "minor")
              .attr("x1", 0)
              .attr("x2", 400)
              .attr("y1", y)
              .attr("y2", y)
              .style("stroke", function(d,i){
                if (d%50 !== 0) {
                    return "#ccc";
                }else {
                    return "#666";
                }
            });

Hope this helps.