D3图未使用统一数据进行更新

我正在绘制条形图。奇怪的是，条形图适用于唯一的数据，但当用完全相同的数据更新时，图形不会更新。这不是一个缩放/间距问题，因为代表数据的rect根本没有生成。

这是一个JSFiddle演示我的问题。

更多信息

条形图的数据格式如下：

    data.push({
        temperature: 10,
        humidity: 20,
        light: 30
    });

条形图为每个属性创建一个单独的条形图。属性由这种类型的对象表示，以帮助分隔和命名条形图：

// type objects
typeObject = {
    temperature: {
        string: "temperature", //type name
        class: "temp",         //css class for styling
        initDis: 0,            //defines where to place first bar
        dis: 3,                //defines space between the next temp bar
        base: tempBase,        //the <g> element base
        color: "#A6E22E"       //color
    },
    humidity: {
       ...
    },
    ...
};

而且，每次添加数据时，这些类型对象都会被迭代并传递到以下函数中，以生成d3"更新模式"：

var createBarsForCategory = function (type) {
    var bars;
//`data` has been updated to an array containing newly added data
bars = type.base.selectAll("rect")
    .data(data, function(d) {
        return d[type.string];
    });
//general update transition
bars.transition().duration(500).attr("x", function(d, i) {
    return i * (m.bar.w + m.bar.space) * type.dis + m.bar.w * type.initDis;
});
// enter
bars.enter()
    .insert("rect")
    .attr("class", type.class)
    .attr("width", m.bar.w)
    .attr("height", function (d) {
        return 0;
    })
    .attr("x", function (d, i) {
        return i * (m.bar.w + m.bar.space) * type.dis + m.bar.w * type.initDis;
    })
    .attr("y", function (d) {
        return scales.yscale(0);
    })
    .transition().delay(100).duration(1000)
    .attr("height", function (d) {
        return scales.yscale(0) - scales.yscale(d[type.string]);
    })
    .attr("y", function (d) {
        return scales.yscale(d[type.string]);
    })
;
// remove
bars.exit().remove();
};

提前感谢您抽出时间。