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。

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

1 个答案: