Question

我正在制作条形图。奇怪的是，条形图适用于唯一数据，但是当使用完全相同的数据进行更新时，图表不会更新。这不是比例/间距问题，因为表示数据的rect根本没有生成。

Here is a JSFiddle demonstrating my problem。

更多信息

条形图以下列形式提供数据：

    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();
};

提前感谢您的时间。

Answer 1

我已使用以下代码在第173-178行更新了您的小提琴http://jsfiddle.net/pyLh7tcn/33/：

bars = type.base.selectAll("rect")
    .data(data);

现在，随机数据集和统一数据集都正确绘制。

希望这有帮助。

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

更多信息

1 个答案: