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.