D3js & CSS selectors

Question

Reference: http://bl.ocks.org/d3noob/8dc93bce7e7200ab487d

CSS Section

.axis path,
.axis line 
 { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges;}

D3JS Section

svg.append("g").attr("class", "x axis")
svg.append("g").attr("class", "y axis")

1. Can somebody explain class "x axis" and "y axis". I am able to see definition for "axis" in CSS but not "x axis" or "y axis" ?

2. According to CSS decedents notation ".axis[space]path" should mean any path element under an ".axis" element. But Path is not a tag in html. How should I approach this CSS notation ?

Apologies for the silly questions, please help.

Answer 1

It means to add two classes 'x' and 'axis' to the g you just append. .attr() can assgin multiple classes to the element, here it does not represents a selection, it is an only an assignment here.

Answer 2

1) Following code creates a g element with classes x and axis and appends to the svg.
svg.append("g").attr("class", "x axis")

x and axis are two different class names. The current CSS definition uses the axis class right now. So that those styles will be available for both the g elements having axis class. (Say x and y axes)

If you would like to add separate styles for each axis, you can define styles as shown below.

.x .axis path, .x .axis line{
   fill: red;
}
.y .axis path, .y .axis line{
   fill: green;
}

2) According to CSS decedents notation ".axis[space]path" should mean any path element under an ".axis" element. Path is not a tag in html. but note that Path is a tag in html5.

Answer 3

That's the convention followed in most of D3 examples. You were confused by the example you were viewing.

Check this example instead: http://bl.ocks.org/mbostock/3885304 Specifically this part:

.x.axis path {
  display: none;
}