主要和次要蜱有不同的风格，整个页面覆盖D3？ [英] Major and minor ticks with different style, whole page covered D3?

问题描述

我想绘制一个轴，其中主要和次要刻度覆盖我的整个页面风格不同。我按照。

解决方案

这样做的新方法是有几个轴，一个用于主要刻度线，另一个用于较小刻度线。

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

更多信息此处。

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:

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.

解决方案

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.

这篇关于主要和次要蜱有不同的风格，整个页面覆盖D3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！