d3 追加简单区域

Question

我想将简单的面积附加到我的图表中，并将面积值的端点作为常量。

percentArea = d3.svg.area()
      .interpolate('linear')
      .x0(0)
      .x1(w)
      .y0(h/4)
      .y1(h);

我想直接附加这个区域并给它一个颜色填充。 感谢帮助。 我在尝试填充区域时特别困难。 该图表在该区域上显示一条线，但在我尝试时没有填充。

编辑：试图使问题更加清晰和具体：我面临的问题仅是当我尝试在不传递数据的情况下调用我的函数时。 当我调用percentArea(data) 时，区域填充按预期工作。 但是，当我的区域的端点不变时，我无法理解为什么我必须传递数据。

Answer 1

您需要确保您渲染的路径正在被填充。 有两种方法可以做到这一点：

设置样式

path.style("fill", "steelblue");

设置一个类并利用 CSS

path.attr("class", "filled-area");

// In CSS
.filled-area {
    fill: steelblue;
}

这是一个快速示例：

带笔划的面积图：

没有填充的面积图

如您所见，默认为黑色

正确填充的面积图