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。

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

NVD3 lineChart - Fill area above the line, instead of below

javascript

d3.js

nvd3.js