如何用垂直折线图填充区域？

Question

我正在尝试用D3.js制作一个垂直图表，并感觉到该线区域与y轴之间的颜色区域，但它根本不会被填充。它只填补了一部分。

这是我想要得到的正确图表的图像：

这是我现在的错误图表的图像：

wrong-filled-chart

用标准图表填充区域很简单。可以使用y0参数并将其设置为零，以填充x轴和y的顶部值之间的所有区域。

使用垂直图表填充区域对我来说不是那么简单，因为我无法使用y0来解决问题。让它工作的唯一方法是在输入数组的末尾添加行值，另一个元素具有此值（x，y）=>（0，最小深度）。所以我总是至少有一个x值为零的元素。

var allArray = [{
    "parameter": 0.32,
    "depth": -0.02
  },
  {
    "parameter": 0.32,
    "depth": -0.04
  },
  {
    "parameter": 0.325,
    "depth": -0.06
  },
  {
    "parameter": 0.33,
    "depth": -0.08
  },
  {
    "parameter": 0.335,
    "depth": -0.1
  },
  {
    "parameter": 0.33,
    "depth": -0.12
  },
  {
    "parameter": 0.315,
    "depth": -0.14
  },
  {
    "parameter": 0.325,
    "depth": -0.16
  },
  {
    "parameter": 0.33,
    "depth": -0.18
  },
  {
    "parameter": 0.335,
    "depth": -0.2
  },
  {
    "parameter": 0.335,
    "depth": -0.22
  },
  {
    "parameter": 0.315,
    "depth": -0.24
  },
  {
    "parameter": 0.32,
    "depth": -0.26
  },
  {
    "parameter": 0.33,
    "depth": -0.28
  },
  {
    "parameter": 0.34,
    "depth": -0.3
  },
  {
    "parameter": 0.345,
    "depth": -0.32
  },
  {
    "parameter": 0.355,
    "depth": -0.34
  },
  {
    "parameter": 0.37,
    "depth": -0.36
  },
  {
    "parameter": 0.365,
    "depth": -0.38
  },
  {
    "parameter": 0.335,
    "depth": -0.4
  },
  {
    "parameter": 0.32,
    "depth": -0.42
  },
  {
    "parameter": 0.3,
    "depth": -0.44
  },
  {
    "parameter": 0.29,
    "depth": -0.46
  },
  {
    "parameter": 0.235,
    "depth": -0.48
  },
  {
    "parameter": 0.22,
    "depth": -0.5
  }
];

draw2("#svg4a", allArray);

function draw2(selector2, allArray) {

  var data = allArray;

  var startElement = { depth: 0, parameter: 0.3 };

  data.unshift(startElement);

  var margin = {
    top: 20,
    right: 20,
    bottom: 0,
    left: 35
  };
  var width = 150 - margin.left,
    height = 580 - margin.top;

  var svg = d3.select(selector2)
    .append("svg")
    .attr("class", "SVGcontent")
    .attr("width", width + margin.left)
    .attr("height", height + margin.top);

  // Pattern definition
  const defs = svg.append('defs')
    .append('pattern')
    .attr('id', 'whitecarbon2')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 4)
    .attr('height', 4)
    .append('path')
    .attr('stroke', '#010101')
    .attr('stroke-width', 1)
    .attr("opacity", 0.5)
    .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2');

  data.forEach(function(d) {
    d.parameter = parseFloat(d.parameter);
  });
  var xScale = d3.scaleLinear()
    .domain([
      d3.max(data, function(d) {
        return d.parameter
      }) + 0.4, 0
    ])
    .range([0, width]);

  var yScale = d3.scaleLinear()
    .domain([
      0,
      d3.min(data, function(d) {
        return d.depth
      })
    ])
    .range([0, height - 20]);

  var line = d3.line()
    .x(function(d) {
      return xScale(d.parameter)
    })
    .y(function(d) {
      return yScale(d.depth)
    });

  var artboard = svg.append("g")
    .attr("transform", "translate(35," + margin.top + ")");

  var area = d3.area()
  .x1(function(d) {
      return xScale(d.parameter)
  })
  .x0(xScale(0))
  .y(function(d) {
      return yScale(d.depth)
  });

  // add the area
  artboard.append("path")
    .datum(data)
    .attr("class", "areaColore1")
    .attr("d", area)
    .attr("fill", "#fefefe");

  // add the pattern
  artboard.append("path")
    .datum(data)
    .attr("class", "area")
    .attr("d", area)
    .style('stroke', '#777777')
    .attr("fill", "url(#whitecarbon2)");

  artboard.append("path")
    .attr("d", line(data))
    .attr("stroke-width", "2")
    .attr("fill", "none");

  var xAxis = d3.axisTop(xScale);

  ticks = xScale.ticks(1);
  ticks.push(0);
  ticks.push(0.3);
  xAxis.tickValues(ticks);
  var yAxis = d3.axisLeft(yScale);

  artboard.append("g")
    .attr("class", "xAxis")
    .call(xAxis)
    .selectAll("text")
    .attr("y", -15)
    .attr("x", 0)
    .attr("dy", ".35em")
    .attr("transform", "rotate(none)")
    .style("text-anchor", "middle");

  artboard.append("g")
    .attr("transform", "translate(0,0)")
    .attr("class", "yAxis")
    .call(yAxis);
  // Adding title label to axis Y
  artboard.append("text")
    .attr("transform", "rotate(90)")
    .attr("y", 30)
    .attr("x", 6)
    // .attr("dy", "1em")
    .style('fill', '#777777')
    .style("text-anchor", "start")
    .text("Depth [m]");


  function make_x_gridlines() {
    return xAxis.ticks(1);
  }

  function make_y_gridlines() {
    return yAxis.ticks(11);
  }


  artboard.append("g")
    .attr("class", "grid gridX")
    .call(make_x_gridlines()
      .tickSize(-height + margin.top - 50)
      .tickFormat("")
    )

  artboard.append("g")
    .attr("class", "grid gridY2")
    .attr("transform", "translate(0,0)")
    .call(make_y_gridlines()
      .tickSize(-200)
      .tickFormat("")
    )
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="svg4a"></div>

预期：从垂直值线到y轴的所有区域都填充颜色。

实际：仅用于线的第一个和最后一个点值之间的连接线的填充区域。

这是一个实例：Live chart

注意：我还尝试添加此代码以使参数字段始终为0，因此图表已正确填充。

我添加的代码是这样的：

  var startElement = { depth: 0, parameter: 0.3 };

  data.unshift(startElement);

并且这个工作正常也没有设置.x0（即使设置它是正确的）。但我的目标是找到一个配置，我没有义务在输入数组值中插入假值。我认为插入.x0应该足以使图表填充整体，就像图表处于水平模式时y0从零填充到参数值。有一种方法可以不插入假值吗？