javascript - D3js 和 CSS 选择器

Question

引用:http://bl.ocks.org/d3noob/8dc93bce7e7200ab487d

CSS 部分

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

D3JS 部分

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

1. 有人可以解释类“x 轴”和“y 轴”。我能够在 CSS 中看到“轴”的定义，但看不到“x 轴”或“y 轴”？

2. 根据 CSS decedents 符号“.axis[space]path”应该表示“.axis”元素下的任何路径元素。但是 Path 不是 html 中的标签。我应该如何处理这个 CSS 符号？

很抱歉提出愚蠢的问题，请帮忙。

Answer 1

1) 下面的代码创建了一个 g 元素，类为 x 和 axis 并附加到 svg。
svg.append("g").attr("类", "x 轴")

x 和 axis 是两个不同的类名。 当前的 CSS 定义现在使用轴类。这样这些样式将可用于具有 axis 类的 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 中是一个标签。