NVD3 lineChart - 填充线条上方的区域，而不是下方

Question

我正在开发一个与此示例非常相似的图表：http://jsfiddle.net/ezanker/L6nfq/

但我不想填充蓝线下方的蓝色区域，而是填充它上方的区域。这种情况我该怎么办？

我知道有一种使用纯 D3.js 的简单方法（通过函数 y0 和 y1），但我想要使用 NVD3 库的解决方案。

可以在这个jsfiddle中做一个小的改变来填充线条上方的蓝色区域而不是它下方的区域吗？

谢谢。

Answer 1

我看不到使用nvd3 提供的功能，所以我只好用基础d3 破解它：

setTimeout(function(){
    var area = d3.svg.area()
    .x(function(d) { return chart.xScale()(d.x); })
    .y0(0)
    .y1(function(d) { return chart.yScale()(d.y); });
    var t = d3.select(".nv-series-2"),
        d = t.datum().values;
  t.append("path")
    .attr("d", area(d))
    .style("fill", "steelblue");
}, 10);

---

更新小提琴here。

编辑意见

这个疯狂怎么样：

var area = d3.svg.area()
    .x(function(d) {
      return chart.xScale()(d.x);
    })
    .y0(0)
    .y1(function(d) {
      return chart.yScale()(d.y);
    });
  function addArea() {
    setTimeout(function() {
      d3.selectAll("#cust-fill").remove();
      d3.selectAll('.nv-group')
        .each(function(d) {
          if (d.key === "Another sine wave") {
            var t = d3.select(this),
              d = t.datum().values;
            t.append("path")
              .attr("id", "cust-fill")
              .attr("d", area(d))
              .style("fill", d.color)
              .style("opacity", ".3");
          }
        })
    }, 100);
  }
  nv.dispatch.render_end = addArea;
  chart.dispatch.stateChange = addArea;

更新fiddle。