Question

在我的d3.js折线图中，我想填充2行之间的颜色。我需要在图表的开头和图表的末尾添加一个铃声。任何人都建议我这样做的正确方法？

这是图像，我正在尝试制作：

我的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

如何在线图中的两行之间添加填充？

1 个答案: