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 between major and minor ticks lines. Here is a picture represent what I'm looking for:

Adobe Photoshop grid Windows

This is my code:

           // Define identity (1:1) scales
            var x = d3.scale.identity().domain([0, 400]);
            var y = d3.scale.identity().domain([0, 300]);

            // Define container
            var chart = d3.select("body")
                .append("svg")
                .attr("class", "chart")
                .attr("width", 500)
                .attr("height", 400)
                .append("g")
              .attr("transform", "translate(40,20)");

           // 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", "#ccc");

            // 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", "#ccc");

            // Define stock x and y axis
            var xAxis = d3.svg.axis().scale(x).orient('top');
            var yAxis = d3.svg.axis().scale(y).orient('left');

            chart.append('g')
              .attr("class", "axis")
              .call(xAxis);

            chart.append('g')
              .attr("class", "axis")
              .call(yAxis);

In this case I don't know if I missed some thing?

Complete jsfiddle here.

score 1 · Answer 1 · answered Jun 30 '15 at 14:17

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.

Thanks for your answer it very cool but I'm looking for a generic answer. In this case if I remove `line` tags all the grid will remove, so I'm looking for some method to build primary grid with different style. Is there any way to using `d3 ticksubdivide` or made change in `d3.svg.axis()` function. — Gabriel, Jul 01 '15 at 11:54

score 0 · Accepted Answer · answered Jul 08 '15 at 19:29

The new way to do this is to have several axes, one for the major ticks and another one for the minor ones. You would select the ticks that also appear on the major axis for the minor one and remove them.

svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).ticks(20).tickSize(-height))
.selectAll(".tick")
.data(x.ticks(10), function(d) { return d; })
.exit()
.classed("minor", true);

svg.append("g")
 .attr("class", "axis")
 .attr("transform", "translate(0," + height + ")")
 .call(d3.svg.axis().scale(x).ticks(10));

More information here.

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

2 Answers2

Linked