D3：设置图表的背景颜色

Question

我正在进行一项可视化工作，涉及堆叠的直方图和非常细的条形图。

问题在于白色背景会引起令人不快的视觉振动并使条形难以理解：

http://i.stack.imgur.com/GN0XD.png

我正在寻找的是一种为图表背景设置特定颜色的方法。我试图将其设置为SVG元素，如下所示：

svg {
  background-color: #ccc;
}

但（显然）它没有正常工作：

http://i.stack.imgur.com/ctbYo.png

如何设置背景颜色，使其与图表的形状完全相同？

Answer 1

我设法找到了这个快速而肮脏的解决方案。只需在每个条形图的右侧添加一个像素伪阴影：

rect {
  -webkit-svg-shadow: 1px 0px #ccc;
}

产生这个： http://i.stack.imgur.com/xSVOD.png

Answer 2

图表是如何实例化的？通过使用svg {background-color：#ccc;}，你将所有svg元素的背景颜色设置为#ccc（除了覆盖的地方除外），所以如果你的图表是另一个带有一些边距的svg元素的子元素，它会解释为什么对齐不好。

修复的一个策略可能是使用浏览器的调试功能（ctrl + shift + i来调出chrome中的'开发人员工具'）来查看DOM元素并尝试缩小哪些内容覆盖哪些图形区域与图形区域加上底部/左侧边距。不确定其他浏览器，但chrome很有用，如果你将鼠标悬停在html文档中的元素上，它将在浏览器中“突出显示”该元素。这可能会帮助您缩小特定需要风格化的对象。