jquery - 如何在折线图中的两条线之间添加填充？

Question

在我的 d3.js 线图中，我想在两条线之间填充颜色。我还需要在图表的开头和结尾添加一个圆球。有人建议我正确的方法吗？

这是我想要制作的图像:

Live demo here

我的js代码:

function InitChart() {

    var vis = d3.select("#visualisation"),
      WIDTH = 1000,
      HEIGHT = 500,
      MARGINS = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
      },
      xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2000, 2010]),
      yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([134, 215]),
      xAxis = d3.svg.axis()
      .scale(xScale),
      yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left");

    vis.append("svg:g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
      .call(xAxis);
    vis.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + (MARGINS.left) + ",0)")
      .call(yAxis);
    var lineGen = d3.svg.line()
      .x(function(d) {
        return xScale(d.year);
      })
      .y(function(d) {
        return yScale(d.sale);
      })
      .interpolate("basis");
    vis.append('svg:path')
      .attr('d', lineGen(data))
      .attr('stroke', 'green')
      .attr('stroke-width', 2)
      .attr('fill', 'none');
    vis.append('svg:path')
      .attr('d', lineGen(data2))
      .attr('stroke', 'blue')
      .attr('stroke-width', 2)
      .attr('fill', 'none');
  }

  InitChart();

Answer 1

您应该使用 d3.svg.area 来实现此目的:

 var area = d3.svg.area()
  // Same x axis (could use .x0 and .x1 to set different ones)
  .x(function(d, i) { return xScale(data[i].year); })
  .y0(function(d, i) { return yScale(data[i].sale); })
  .y1(function(d, i) { return yScale(data2[i].sale); })
  .interpolate("basis");

vis.append("path")
  .datum(data)
  .attr("d", area)
  .attr("fill", "#CCC");

这是您修改后的plunkr:

http://plnkr.co/edit/1juPlaHyZcVujaR0yKLl