D3.js条形图未选择或绑定“；日期“；数据到Y轴标签“；“文本”；第一个ajax请求中的元素

我正在构建一个动态条形图，它绑定通过ajax请求的获取的JSON数据，并根据Metric和Category select下拉菜单中的值过滤数据。这些值作为参数传递给控制器，并帮助决定查询数据库的内容。出于某种原因，在发送的第一个ajax请求上（并且仅在第一个、不是第二个、不是第三个等），无论选择了哪个选择选项，从服务器返回的带有JSON数据的“日期”值都不会显示在图表上。对于所有后续ajax请求，这些日期值都会按预期显示，但不会在第一个请求上显示

当查看Chrome开发者工具中的DOM元素时，.labelContainer“g元素在第一个ajax请求之后是空的。这意味着（至少对我来说）更新或输入选择没有正常工作，并且只有退出选择在第一个请求上工作，这很奇怪，因为下面是通过ajax请求的JSON数据示例，其中有明确的“日期”值要输入，但在第一个请求上没有显示：

[{"date":"23","load_volume":40},{"date":"24","load_volume":10},{"date":"28","load_volume":432},{"date":"30","load_volume":20}]

此外，在ajax请求的success函数中，如果我执行selectAll（“text.label”）而不是selectAll（.labelContainer.label），我会将值分配给label变量/函数，如下所示：

var label = svg.selectAll(".labelContainer .label").data(data, function(d) { return d.date; });

。。。日期不会在每个其他请求上显示（即，在所有奇数请求上不显示日期，但在所有偶数请求上显示日期）

例如：

默认图形（在页面加载时呈现）：

第一个ajax请求（未显示日期）：

第二个ajax请求（显示日期）：

这里有我遗漏的东西吗？任何帮助都将不胜感激。下面是绘制图表的代码，为了简洁起见，省略了一些部分。“标签”名字对象对应于Y轴文本元素： 以下是完整代码的要点：

编辑

初始图形的DOM外观（.labelContainer g填充了日期标签文本元素）：

DOM在第一个ajax请求中的外观（.labelContainer g empty和no text元素）：

并在第二次请求时（.labelContainer g为空，但标签文本元素出现在其后）：

---

在初始图形上，标签选择似乎返回.labelContainer g元素中的元素。更新时，第一个ajax请求不返回任何内容，第二个请求返回label文本元素，但不在.labelContainer g元素内。

好的，出于某种原因，我对上面的代码进行了以下编辑，现在它可以工作了，但我并不真正理解它，因为现在更新时它选择了.labelContainer文本元素，但是我移除了标签容器

$(document).ready(function () {

 //*** Initial data request and graph configuration omitted for brevity, except for Y axis label configuration below, which is relevant ***//

  // Draw the Y axis labels. ****CHANGED HERE****
  svg.append("g").selectAll("text").data(data).enter().append("text")
          .attr("x", function(d, i) { return x(i) + (barWidth / 2) - 15; })
          .attr("y", graphHeight)
          .attr("transform", "translate(0,15)")
          .attr("class", "label")

          .text(function(d) { return d.date; });

            // Ajax request for updating the graph when user clicks option in select menu
            $("#metric_select, #category_select").on('change', function () {
                    $.ajax({
                        //*** Ajax settings ommitted **** //
                        success: function(data) {

                            // Set the new Y scale.
                            var y = d3.scale.linear()
                                  .domain([0, d3.max(data, function(d) { return d.load_volume; })])
                                  .range([0, graphHeight]);


                            // Re-select chart elements and bind them to new data
                            //*** rect(bar/column) and text element re-selection omitted for brevity ***//
// ****CHANGED HERE****
                                var label = svg.selectAll(".labelContainer text").data(data, function(d) { return d.date; }); 
                                var delay = function(d, i) { return i * 50; };

                            // Updating rects and text.
                            // *** Omitted for brevity ***//

                            // Update the Y axis labels.
                            label.transition().duration(750)
                                .delay(delay)
                                .attr("x", function(d, i) { return x(i) + (barWidth / 2) - 15; })
                                .attr("y", graphHeight)
                                .attr("transform", "translate(0,15)")
                                .attr("class", "label")
                                .text(function(d) { return d.date; });

                            // Draw new rects and texts
                            // *** Omitted for brevity **//

                            // Draw new labels.
                            label.enter().append("text")
                                .attr("x", function(d, i) { return x(i) + (barWidth / 2) - 15; })
                                .attr("y", graphHeight)
                                .attr("transform", "translate(0,15)")
                                .attr("class", "label")
                                .text(function(d) { return d.date; });

                                       // Exit selections                                       
                                       rect.exit().remove(); 
                                       text.exit().remove();    
                   label.exit().remove();

                                //*** closing brackets omitted for brevity ***//

---

这是很多代码。你能把它归结为仍然能说明问题的最小版本吗？你验证过你使用的这些选择器实际上返回了你认为它们应该返回的内容吗？@explunit:我从代码中输入了我认为不相关的部分。@LarsKotthoff:我添加了显示DOM状态的屏幕截图。标签选择器按预期返回文本元素，但第一个ajax请求不返回任何文本元素，第二个ajax请求返回文本元素但不在.labelg元素内

$(document).ready(function () {

 //*** Initial data request and graph configuration omitted for brevity, except for Y axis label configuration below, which is relevant ***//

  // Draw the Y axis labels. ****CHANGED HERE****
  svg.append("g").selectAll("text").data(data).enter().append("text")
          .attr("x", function(d, i) { return x(i) + (barWidth / 2) - 15; })
          .attr("y", graphHeight)
          .attr("transform", "translate(0,15)")
          .attr("class", "label")

          .text(function(d) { return d.date; });

            // Ajax request for updating the graph when user clicks option in select menu
            $("#metric_select, #category_select").on('change', function () {
                    $.ajax({
                        //*** Ajax settings ommitted **** //
                        success: function(data) {

                            // Set the new Y scale.
                            var y = d3.scale.linear()
                                  .domain([0, d3.max(data, function(d) { return d.load_volume; })])
                                  .range([0, graphHeight]);


                            // Re-select chart elements and bind them to new data
                            //*** rect(bar/column) and text element re-selection omitted for brevity ***//
// ****CHANGED HERE****
                                var label = svg.selectAll(".labelContainer text").data(data, function(d) { return d.date; }); 
                                var delay = function(d, i) { return i * 50; };

                            // Updating rects and text.
                            // *** Omitted for brevity ***//

                            // Update the Y axis labels.
                            label.transition().duration(750)
                                .delay(delay)
                                .attr("x", function(d, i) { return x(i) + (barWidth / 2) - 15; })
                                .attr("y", graphHeight)
                                .attr("transform", "translate(0,15)")
                                .attr("class", "label")
                                .text(function(d) { return d.date; });

                            // Draw new rects and texts
                            // *** Omitted for brevity **//

                            // Draw new labels.
                            label.enter().append("text")
                                .attr("x", function(d, i) { return x(i) + (barWidth / 2) - 15; })
                                .attr("y", graphHeight)
                                .attr("transform", "translate(0,15)")
                                .attr("class", "label")
                                .text(function(d) { return d.date; });

                                       // Exit selections                                       
                                       rect.exit().remove(); 
                                       text.exit().remove();    
                   label.exit().remove();

                                //*** closing brackets omitted for brevity ***//