将d3.js轴指定为背景颜色并更改图层排序

Question

目前，当您移动圆圈时，它们将在轴上移动并遮挡它们。我正在尝试为轴指定背景颜色，以便圆圈在斧头下方移动。但是，使用CSS background属性似乎没有做任何事情。

如何创建一个不透明的轴，它将成为圆圈上方的一层？

JSFIDDLE：http://jsfiddle.net/PXw5E/1/

Answer 1

通过更改附加dom元素的顺序，可以轻松地在点上绘制轴。 See example

无法为轴指定css背景，因为它们是使用SVG绘制的。您需要使用rects或path来绘制它。

如果您打算绘制的背景是完全不透明的（即alpha为1），则跳过绘制背景并使用svg clip-rect来裁剪圆圈会更直接。如果您希望轴具有半透明背景，那将无效。

Answer 2

您添加它的orden中的SVG堆栈图，以更改它更改添加的顺序。

您可以在CSS上更改轴样式

.axis text {
  font: 9px sans-serif;
  color: #8c8c8c;
}
.axis path,
.axis line {
  fill: none;
  stroke: #d9dee9;
  shape-rendering: crispEdges;
}

在d3，你有行，路径和文字＆＃39;描边＆＃39;围绕＆＃39;填充＆＃39;

在这里，您可以看到工作样式，包括分层对象：http://jsfiddle.net/klaujesi/rwhp8yjq/