D3js 및 CSS 선택기

Question

참조 : http://bl.ocks.org/d3noob/8dc93bce7e7200ab487d

CSS 섹션

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

1. 누군가가 "X 축"과 "Y 축"클래스를 설명 할 수

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

   D3JS 섹션. 나는 "x 축"이나 "y 축"이 아닌 "축"에 대한 정의를 CSS에서 볼 수 있습니까?

2. CSS decedents 표기법에 따르면 ".axis [space] path"는 ".axis"요소 아래의 경로 요소를 의미해야합니다. 그러나 Path는 html의 태그가 아닙니다. 이 CSS 표기법에 어떻게 접근해야합니까?

바보 같은 질문에 사과드립니다.

Answer 1

1) 다음 코드는 x 및 axis 클래스를 사용하여 g 요소를 만들고 svg에 추가합니다.
svg.append("g").attr("class", "x axis")

x 및 axis 두 개의 서로 다른 클래스 이름입니다. 현재 CSS 정의는 지금 축 클래스를 사용합니다. 축 스타일을 가진 두 개의 g 요소 모두에서 이러한 스타일을 사용할 수 있습니다. (x 축 및 y 축)

축마다 별도의 스타일을 추가하려면 다음과 같이 스타일을 정의 할 수 있습니다.

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

2) CSS decedents 표기법에 따르면 ".axis [space] path"는 ".axis"요소 아래의 경로 요소를 의미해야합니다. 경로는 html의 태그가 아닙니다. 그러나 Path는 html5의 태그입니다.

Answer 2

방금 ​​추가하는 g에 두 개의 클래스 'x'와 'axis'를 추가한다는 것을 의미합니다. .attr()은 요소에 대해 여러 클래스를 assgin 할 수 있습니다. 여기서는 선택 항목을 나타내지 않으며 여기서는 할당입니다.

Answer 3

대부분의 D3 예제에서 사용 된 규칙입니다. 당신은 당신이 보았던 예에 혼란 스러웠습니다.

확인 대신 예 : 특히이 부분 http://bl.ocks.org/mbostock/3885304 :

.x.axis path { 
    display: none; 
}