不同样式的大小刻度，整个页面覆盖 D3？

Question

我想绘制一个包含主要和次要刻度的轴，以不同的方式覆盖我的整个页面。我遵循了 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。

Answer 1

我已经对你的fiddle进行了更改，请看这里http://jsfiddle.net/17ubhxqw/1/

您所要做的就是弄清楚在哪个间隔您想要较深的线和 return 在您的 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";
                }
            });

希望对您有所帮助。

Answer 2

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

更多信息here。

不同样式的大小刻度，整个页面覆盖 D3？

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

javascript

axes

d3.js