Как в d3 строить графики с отрицательными значениями?

Question

[Владимир Голубь]

Данная функция строит график только для положительных значений y, а вот с отрицательными получается пустое место ?

import * as d3 from 'd3';

  export default {
    name: "test",
    data: function () {
      return {
        items: [
          {
            date: 2015,
            actual: 200
          },
          {
            date: 2016,
            actual: 100
          },
          {
            date: 2017,
            actual: -50
          },
          {
            date: 2018,
            actual: 150
          },
          {
            date: 2019,
            actual: 10
          },
          {
            date: 2020,
            actual: 30
          },
        ]
      }
    },
    mounted() {
      var svg = d3.select(this.$refs.testGraph),
          margin = 200,
          width = svg.attr("width") - margin,
          height = svg.attr("height") - margin

      svg.append("text")
          .attr("transform", "translate(100,0)")
          .attr("x", 50)
          .attr("y", 50)
          .attr("font-size", "24px")
          .text("XYZ Foods Stock Price")

      var xScale = d3.scaleBand().range([0, width]).padding(0.4),
          yScale = d3.scaleLinear().range([height, 0]);

      var g = svg.append("g")
          .attr("transform", "translate(" + 100 + "," + 100 + ")");

      xScale.domain(this.items.map(function(d) { return d.date; }));
      yScale.domain([0, d3.max(this.items, function(d) { return d.actual; })]);

      g.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(xScale))
          .append("text")
          .attr("y", height - 250)
          .attr("x", width - 100)
          .attr("text-anchor", "end")
          .attr("stroke", "black")
          .text("Year");

      g.append("g")
          .call(d3.axisLeft(yScale).tickFormat(function(d){
            return "$" + d;
          })
          .ticks(10))
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", "-5.1em")
          .attr("text-anchor", "end")
          .attr("stroke", "black")
          .text("Stock Price");

      g.selectAll(".bar")
          .data(this.items)
          .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function(d) { return xScale(d.date); })
          .attr("y", function(d) { return yScale(d.actual); })
          .attr("width", xScale.bandwidth())
          .attr("height", function(d) { return height - yScale(d.actual); });
    }
  }