主要和次要刻度线风格不同，整个页面覆盖D3？

我想绘制一个带有主要和次要刻度的轴，以不同的方式覆盖我的整个页面。我遵循的结构this https://stackoverflow.com/questions/19242674/major-and-minor-ticks-with-v3-of-d3例如，但我无法让它发挥作用，使主要和次要之间有所不同 ticks线。这是一张代表我正在寻找的图片：

这是我的代码：

           // 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);

在这种情况下，我不知道我是否错过了什么？

完整的jsfiddlehere http://jsfiddle.net/zzjebraeil/17ubhxqw/.

我已经对你的小提琴进行了更改，请参见这里http://jsfiddle.net/17ubhxqw/1/ http://jsfiddle.net/17ubhxqw/1/

您所要做的就是弄清楚您想要较暗的线的时间间隔，并在 x 和 y 网格声明中返回不同的颜色：

// 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";
                }
            });

希望这可以帮助。