javascript - 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);

<小时/>

更新了 fiddle 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 .