javascript - 主要和次要壁虱的样式不同，整页覆盖D3？

我想绘制一个带有主要和次要刻度线的轴，以覆盖我的整个页面样式。我遵循了this示例的结构，但是我无法使它在主要和次要 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);

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

完成jsfiddle here。

最佳答案

我已对您的小提琴进行了更改，请在此处查看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";
                }
            });

希望这可以帮助。