Графическая диаграмма D3.js не выбирает или не привязывает данные «даты» к метке «текст» Y-оси при первом запросе ajax

Question

Я строю динамическую гистограмму, которая связывает полученные данные JSON, запрошенные через ajax, с фильтруемыми данными в соответствии со значениями в метрике и категории выберите раскрывающиеся меню. Эти значения передаются в качестве параметров в контроллер и помогают решить, для чего запрашивать базу данных. По какой-то причине при первом отправленном аякс-запросе (и только на первом, а не на втором, а не на третьем и т. Д.) И независимо от того, какой вариант выбора выбран, значения «даты», которые отправляются обратно с сервера с данными JSON не отображаются на диаграмме. Для всех последующих запросов ajax эти значения даты отображаются как ожидалось, но не по первому запросу.

При просмотре элементов DOM в инструментах разработчика Chrome элемент «.labelContainer» пуст после этого первого запроса ajax. Это означает (по крайней мере, для меня), что обновление или ввод выбора не работают должным образом и что на этот первый запрос работает только выбор выхода, что является нечетным, потому что здесь приведен пример данных JSON, запрошенных через ajax, и есть четкие «дата» значения должны быть введены, но которые не отображаются на первом запросе:

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

Кроме того, в функции успеха моего AJAX запрос, где я присвоить значение переменной метка/функции, если я выполняю не SelectAll ("text.label") вместо SelectAll (.labelContainer .label), как я ниже:

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

... даты делать нет t на каждый другой запрос (т. е. на все нечетные запросы, которые они не отображают, но отображаются во всех запросах с четным номером).

Пример:

По умолчанию график (оказанной при загрузке страницы):

запрос Первый Ajax (без даты показан):

Второй запрос Ajax (даты):

Что-то я здесь не хватает? Любая помощь будет оценена по достоинству. Ниже приведен код, который отображает график с некоторыми частями, опущенными для краткости. «Метка» кличка соответствует оси текстовых элементов Y: Вот суть полного кода:https://gist.github.com/kwyoung11/b9f1fe72e19bc70526db

$(document).ready(function() { 

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

    // Place Y axis labels in g element for easy maneuvering  
     var label_group = svg.append("g").attr("class", "labelContainer").attr("transform", "translate(0,15)"); 

     // Draw the Y axis labels. 
     label_group.selectAll("text").data(data).enter().append("text") 
       .attr("x", function(d, i) { return x(i) + (barWidth/2) - 15; }) 
       .attr("y", graphHeight) 
       .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 ***// 
           var label = svg.selectAll(".labelContainer .label").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 ***// 

EDIT

Что DOM выглядит для исходного графа (.labelContainer g, заполненный текстовыми элементами с меткой даты):

Как выглядит DOM при первом запросе ajax (.labelContainer г пустой и не текстовые элементы):

А на второй запрос (.labelContainer г пустой, но этикетка текстовые элементы появляются после него):

Оказывается, что на начальном графике выбор метки возвращает элементы внутри элемента .labelContainer g. При обновлении первый запрос ajax ничего не возвращает, а второй возвращает элементы текста метки, но не внутри элемента .labelContainer g.

Answer 1

ОК, по какой-то причине я внесла следующие изменения в код выше, и теперь он работает, но я действительно не понимаю, потому что теперь при обновлении он выбирает текстовые элементы .labelContainer, но я удалил .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 ***//