Angularjs 数据进来时更新D3柱状图

所以社区,

我正在制作一个D3直方图作为一个角度指示，我希望它能够随着读取的数据的变化而相应地改变/更新。换句话说，我使用Angular来观察数据的变化，并（希望）在每次数据变化时重新绘制直方图

这可能主要是关于D3的数据更新和绑定的问题，因为$watchCollection似乎工作正常。尽管我已经完成了向d3图表添加元素的过程，但我仍然无法将其应用到直方图中。我认为我的直方图中的元素嵌套的方式真的让我困惑

上下文：理想情况下，此直方图将从一个数组中读取，从几个Ajax调用返回的数据将存储到该数组中。因此，每当一组新数据到达时，柱状图将自身再增长一个条形图。这就是为什么我想知道如何正确地更新图表和x轴

谢谢！：）

JS小提琴在这里：

这里是d3部分的代码，主要取自mbostock的可排序条形图

        // Aesthetic settings 
        var margin = {top: 20, right: 50, bottom: 20, left: 50},
            width = document.getElementById('performance').clientWidth - margin.left - margin.right || 
                    940 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom, 
            barColor = "steelblue", 
            axisColor = "whitesmoke", 
            axisLabelColor = "grey",
            yText = "# QUERIES", 
            xText = "BEACON IDs";

        // Inputs to the d3 graph 
        var data = scope[attrs.data];

        // A formatter for counts.
        var formatCount = d3.format(",.0f");

        // Set the scale, separate the first bar by a bar width from y-axis
        var x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1, 1);

        var y = d3.scale.linear()
            .range([height, 0]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickFormat(formatCount);

        // Initialize histogram 
        var svg = d3.select(".histogram-chart")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        function drawAxis(){


            data.forEach(function(d) {
                d.nqueries = +d.nqueries;
            });

            x.domain(data.map(function(d) { return d.name; }));
            y.domain([0, d3.max(data, function(d) { return d.nqueries; })]);

            // Draw x-axis 
            svg.append("g")
                .attr("class", "x-axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append("text")
                .attr("y", 6)
                .attr("dy", "-0.71em")
                .attr("x", width )
                .style("text-anchor", "end")
                .style("fill", axisLabelColor)
                .text(xText);

            // Draw y-axis 
            svg.append("g")
                .attr("class", "y-axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .style("fill", axisLabelColor)
                .text(yText);

            // Change axis color 
            d3.selectAll("path").attr("fill", axisColor);
        }

        function updateAxis(){
            console.log(data);
            data.forEach(function(d) {
                d.nqueries = +d.nqueries;
            });

            x.domain(data.map(function(d) { return d.name; }));
            y.domain([0, d3.max(data, function(d) { return d.nqueries; })]);

            svg.selectAll("g.y_axis").call(yAxis);
            svg.selectAll("g.x_axis").call(xAxis);

        }


        function drawHistogram(){

            drawAxis();

            var bar = svg.selectAll(".bar")
                .data(data)
                .enter().append("g")
                .attr("class", "barInfo");

            bar.append("rect")
                .attr("class", "bar")
                .attr("x", function(d){ return x(d.name) })
                .attr("width", x.rangeBand())
                .attr("y", function(d){ return y(d.nqueries) })
                .attr("height", function(d) { return height - y(d.nqueries); })
                .attr("fill", barColor);

            bar.append("text")
                .attr("y", function(d){ return y(d.nqueries) })
                .attr("x", function(d){ return x(d.name) })
                .attr("dy", "-1px")
                .attr("dx", x.rangeBand()/2 )
                .attr("text-anchor", "middle")
                .attr("class", "numberLabel")
                .text(function(d) { return formatCount(d.nqueries); });
        }

        // Doesn't work :( 
        function updateHistogram(){
            console.log("updating");

            // Redefine scale and update axis 
            updateAxis(); 

            // Select 
            var bar = svg.selectAll(".barInfo").data(data);

            // Update - rect 
            var rects = bar.selectAll("rect")
                .attr("class", "bar")
                .attr("x", function(d){ return x(d.name) })
                .attr("width", x.rangeBand());

            // Update 
            var texts = bar.selectAll("text")
                .attr("x", function(d){ return x(d.name) })
                .attr("dx", x.rangeBand()/2 );

            // Enter 
            bar.enter().append("g")
                .attr("class", "bar").selectAll("rect").append("rect")
                .attr("class", "bar")
                .attr("x", function(d){ return x(d.name) })
                .attr("width", x.rangeBand())
                .attr("y", function(d){ return y(d.nqueries) })
                .attr("height", function(d) { return height - y(d.nqueries); })
                .attr("fill", barColor);

            bar.enter().append("g")
                .attr("class", "bar").selectAll("text").append("text")
                .attr("y", function(d){ return y(d.nqueries) })
                .attr("x", function(d){ return x(d.name) })
                .attr("dy", "-1px")
                .attr("dx", x.rangeBand()/2 )
                .attr("text-anchor", "middle")
                .attr("class", "numberLabel")
                .text(function(d) { return formatCount(d.nqueries); });

        }

        drawHistogram();

---

首先，在更新轴时，您使用了错误的

类

选择器：

svg.selectAll("g.y-axis").call(yAxis); //<-- dash not underscore
svg.selectAll("g.x-axis").call(xAxis);

举个例子

编辑

哎呀，我的更新选择不正确

bar.selectAll("rect")

应该是：

bar.select("rect")

这将修复更新和排序

更新

---

还请注意，我进一步折叠了您的代码。使用角度表，您真的不需要单独的绘图和更新功能，两者都可以。

谢谢@Mark！！班名拼错了，真让我哑口无言。。。您可以像那样一起更新所有内容，这也很酷！：）最后一件事，添加新数据似乎破坏了排序功能，如下所示：您知道为什么会这样吗？在您的示例中，图形似乎没有完全更新自身。单击“更改数据”后，前两个栏也应更改，但不会更改。“我不知道为什么……”桑蒂娜，对不起，我回答得有点太快了，被我的替补队员搞砸了！查看最新信息。无需担心，非常感谢您的跟进！：D最后，你能简要解释一下“选择全部”和“选择”是如何产生如此大的差异的吗？我正在阅读，但我不确定“selectAll”是如何导致我们在前面看到的排序行为的。对于其他正在阅读的人来说，我的小提琴中的代码实际上不是一个很好的角度指令。因此，我修复了一些东西，这是最终版本（由于@Mark的帮助，功能完全正常）。：）

bar.select("rect")