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

后端 未结 2 1990
没有蜡笔的小新
没有蜡笔的小新 2021-01-26 06:59

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 b

相关标签:
2条回答
  • 2021-01-26 07:27

    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.

    0 讨论(0)
  • 2021-01-26 07:49

    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.

    0 讨论(0)
提交回复
热议问题