¿Por qué mi viewbox no cambia de tamaño correctamente después de eliminar un elemento del conjunto?

Aquí hay un trabajo jsviolín ejemplo.

Básicamente ingresas un número y presionas "Agregar". Se generará una fila que contenga esa cantidad de cuadros usando Raphael y el cuadro de visualización cambiará de tamaño para ajustarse a las filas. Agregue más filas y el cuadro de vista cambiará de tamaño nuevamente. Esto funciona bien.

Mi problema es que después de crear los cuadros, agrego un objeto de eliminación al final de la fila. Hacer clic aquí debería simplemente eliminar la fila. Parece que funciona bien, excepto que una vez que elimino una fila al intentar agregar una nueva, el cuadro de visualización se reducirá con el mensaje de la consola.

Unexpected value 10 0 NaN NaN parsing viewBox attribute.

Sé que el error proviene de las siguientes dos líneas de código:

var sectionSize = section.getBBox();
paper.setViewBox(sectionSize.x, sectionSize.y, sectionSize.width, sectionSize.height, true);

sin que importe sectionSize.width y .height son NaN, pero no sé por qué. ¿No estoy eliminando la fila correctamente?

Código completo:

$(window).load(function() {

    var paper = Raphael("container", 600, 500);
    var section = paper.set();
    var rowCount = 0;
    var boxSize = 15;
    var boxPadding = 5;
    var pathString = " m0,0 h" + boxSize + ", v" + boxSize + " h-" + boxSize + " v-" + boxSize + " z";

    $("#add-row").click(function() {
        var row = paper.set();

        for (var i = 0; i < $("#count").val(); i++) {
            var x = ((boxSize + boxPadding) * i) + (boxPadding * 2);
            var y = ((boxSize + boxPadding) * rowCount);

            var transformString = "t" + x + "," + y + ", s1,1,0,0 r0,0,0";

            var box = paper.path(pathString).transform(transformString);
            box.attr({
                fill: "red",
                stroke: "black",
                cursor: "pointer"
            });
            row.push(box);

            if (i == $("#count").val() - 1) {
                var del = paper.text(((box.getBBox().width + x) + boxPadding), ((box.getBBox().height / 2) + y), "x");
                del.click(function() {
                    row.remove();
                });

                row.push(del);
            }
        }

        rowCount++;
        section.push(row);

        // Resize ViewBox
        var sectionSize = section.getBBox();
        paper.setViewBox(sectionSize.x, sectionSize.y, sectionSize.width, sectionSize.height, true);

    });
});

HTML

<input type="text" id="count" value="3" />
<button id="add-row">Add</button>

<div id="container" style="border: 1px solid black;">
</div>