javascript - 使用来自实时 Firebase 的数据在 js 中使用 d3 的实时条形图

Question

我是 javascript 的新手，并且在 2 周的大部分时间里一直被困在一个问题上。我正在尝试使用来自 Firebase 的数据制作一个实时更新的条形图。我的数据库的结构是：
标题：
------- child1 -------child2 -------child3
------- child4 Firebase 的数据是从 python 提供的运行良好的脚本，每 10 秒更新一次标题的每个子项。我制作了一个通过随机数生成自动更新的条形图。

   //Return array of 10 random numbers
var randArray = function() {

    for(var i = 0, array = new Array(); i<10; i++) {
        array.push(Math.floor(Math.random()*10 + 1))
    }
    return array
}

var initRandArray = randArray();
var newArray;



var w = 500;
var h = 200;
var barPadding = 1;
var mAx = d3.max(initRandArray)
var yScale = d3.scale.linear()
                .domain([0, mAx])
                .range([0, h])

var svg = d3.select("section")
    .append("svg")
    .attr("width", w)
    .attr("height", h)

svg.selectAll("rect")
    .data(initRandArray)
    .enter()
    .append("rect")
    .attr("x", function(d,i) {return i*(w/initRandArray.length)})
    .attr("y", function(d) {return h - yScale(d)})
    .attr("width", w / initRandArray.length - barPadding)
    .attr("height", function(d){return yScale(d)})
    .attr("fill", function(d) {
    return "rgb(136, 196, " + (d * 100) + ")";
});

svg.selectAll("text")
    .data(initRandArray)
    .enter()
    .append("text")
    .text(function(d){return d})
    .attr("x", function(d, i){return (i*(w/initRandArray.length) + 20)})
    .attr("y", function(d) {return h - yScale(d) + 15})
    .attr("font-family", "sans-serif")
    .attr("fill", "white")

setInterval(function() {

    newArray = randArray();

    var rects = svg.selectAll("rect")

    rects.data(newArray)
        .enter()
        .append("rect")

    rects.transition()
        .ease("cubic-in-out")
        .duration(2000)
        .attr("x", function(d,i) {return i*(w/newArray.length)})
        .attr("y", function(d) {return h - yScale(d)})
        .attr("width", w / newArray.length - barPadding)
        .attr("height", function(d){return yScale(d)})
        .attr("fill", function(d) {
            return "rgb(136, 196, " + (d * 100) + ")";
        });

    var labels = svg.selectAll("text")

    labels.data(newArray)
        .enter()
        .append("text")

    labels.transition()
        .ease("cubic-in-out")
        .duration(2000)
        .text(function(d){return d})
        .attr("x", function(d, i){return (i*(w/newArray.length) + 20)})
        .attr("y", function(d) {return h - yScale(d) + 15})
        .attr("font-family", "sans-serif")
        .attr("fill", "white")


}, 3000)

随机数上的实时条形图

我需要使用来自 firebase 的数据更新图表。我已经知道如何使用快照将 firebase 连接到 js，并且已经尝试过但无济于事。此外，在图表样式方面需要一些帮助。请如果有人知道我怎么能完成这个（它的时间敏感）。这是 jsfiddle 中的代码链接：Live bar chart d3
谢谢

标签： javascriptfirebasefirebase-realtime-database