multiple annotation shapes causes exception

[davelandry]

Copy/pasted from @grimace's issue here: d3plus/d3plus#718

I'm attempting to use annotations to display hvac 'state' bands over top of my graph. I have a simple example that should display 12 different bands on the page but I run into an exception. Here is the code:

let data = [
  {id: "Space Temp", x: 0, y:  0},
  {id: "Space Temp", x: 15, y: 4},
  {id: "Space Temp", x: 30, y: 9},
  {id: "Space Temp", x: 45, y: 13},
  {id: "Space Temp", x: 60, y: 25},
  {id: "Space Temp", x: 75, y: 13},
  {id: "Space Temp", x: 90, y: 9},
  {id: "Space Temp", x: 115, y: 4},
  {id: "Space Temp", x: 150, y: 0},
  {id: "Supply Temp",  x: 0, y: 17},
  {id: "Supply Temp",  x: 15, y:  8},
  {id: "Supply Temp",  x: 30, y:  3},
  {id: "Supply Temp",  x: 40, y: 5},
  {id: "Supply Temp",  x: 45, y: 9},
  {id: "Supply Temp",  x: 60, y: 11},
  {id: "Supply Temp",  x: 75, y: 17},
  {id: "Supply Temp",  x: 90, y: 13},
  {id: "Supply Temp",  x: 120, y: 11},
  {id: "Supply Temp",  x: 150, y: 9}
];


new d3plus.LinePlot()
  .config({
    data: data,
    groupBy: "id",
    selector:"viz",
    annotations: [
      {
        name:"cool",
        data: [
          { id: "cool", x:10, y:16, width:32,  height:20 },
          { id: "heat", x:15, y:19, width:21,  height:20 },
          { id: "heat", x:25, y:19, width:32,  height:20 },
          { id: "cool", x:27, y:16, width:19,  height:20 },
          { id: "heat", x:45, y:19, width:16,  height:20 },
          { id: "cool", x:50, y:16, width:22,  height:20 },
          { id: "heat", x:70, y:19, width:15,  height:20 },
          { id: "cool", x:74, y:16, width:18,  height:20 },
          { id: "heat", x:87, y:19, width:23,  height:20 },
          { id: "cool", x:90, y:16, width:23,  height:20 },
          { id: "heat", x:98, y:19, width:19,  height:20 },
          { id: "cool", x:120, y:16, width:17, height:20 }
        ],
        label: "HVAC",
        fill: function(d) {
            let result:string;
            switch (d.id) {
              case 'heat':
                result = '#ff000050';
                break;
              case 'cool':
                result = '#0000ff50';
                break;
              case 'fan':
                result = '#00ff0050';
                break;
              default:
                result = "#ddd";
            }
            return result;
        },
        // fill: "blue",
        shape: "Rect"
      }
    ]
  })
  .render();

when I run it it hits and exception and draws 4 Rects in the correct place and the rest in the upper left corner of the graph. The exception is:

d3plus.full.js:12721 Error: <rect> attribute transform: Expected number, "… translate(undefined,178.87…".

not sure why some would display correctly and some not.