score:3

Accepted answer

There are two ways you can approach this:

There is a d3 solution wich basically needs no css

svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .call(g => g.selectAll(".tick:first-of-type line")
                .attr("class", "axis_bar")
                .attr("stroke", "black"))
    .call(g => g.selectAll(".tick:not(:first-of-type) line")
                .attr("class", "axis_y_tick")
                .attr("stroke", "red"));

svg.append("g") // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis)
    .call(g => g.selectAll(".tick:first-of-type line")
                .attr("class", "axis_bar")
                .attr("stroke", "black"))
    .call(g => g.selectAll(".tick:not(:first-of-type) line")
                .attr("class", "axis_y_tick")
                .attr("stroke", "red"));
          
svg.append("path") // Add the valueline path.
    .attr("d", valueline(data))
    .attr("class", "graph")
    .attr("stroke", "blue")
    .attr("stroke-width", 2);

This selects the first and every following line and applies different style parameters.

The second solution would be to do it only in css. You may see the class-selectors you need already in the d3 snippet:

.tick:first-of-type line {} //Selects the first Tick/Line wich becomes the main axis.

.tick:not(:first-of-type) line {} // Will select every other tick line, but the first.

I edited your fiddle fit the d3 solution: http://jsfiddle.net/nk13jycw/2/

There is also a nice observable by Mike Bostock on this: https://observablehq.com/@d3/styled-axes

score:1

d3 adds the class tick to the all of the groups containing grid lines (called tick because they can also be used as tick marks).

You can do something like this in CSS to only select them:

.axis .tick line {
  fill: none;
  stroke: black;
  opacity: 0.1;
}

Updated fiddle: http://jsfiddle.net/w7jrxnk5/


Related Query

More Query from same tag