Графики D3 в Rails: несколько Js-файлов перекрываются - PullRequest
Новая
       4

Графики D3 в Rails: несколько Js-файлов перекрываются

0 голосов
/ 06 июля 2018

У меня есть три файла .js, которые должны отображать линейные диаграммы d3 в представлении в определенном порядке.

Вопрос: как получить файл .js, чтобы он не перезаписывал другой, когда оба должны отображать графики в одном и том же виде?

Они раздельные, потому что они используют разные данные.

Файлы 'a' и 'b' должны отображать графики, если 'a' находит данные с помощью вызова ajax. Если нет, файл 'c' должен отобразиться.

Они будут работать независимо! Но когда все файлы присутствуют, они либо не загружаются, либо один загружается три раза: /

Основной вид: 

  <% elsif !@a.empty? %>
    <%= render 'a/graphs' %>
    <%= render 'b/graphs' unless b.empty? %>
  <% else %>
    <%= render 'c/graphs' %>
  <% end %>

Форма помощников:

а / графики "

<div class="row">
<div class="col-md-12">


<div class="table-responsive">
<div id="flow_plot" class="plot">       </div>
</div>

<div class="table-responsive">
<div id="ph_plot" class="plot">       </div>
</div>

<div class="table-responsive">
<div id="turbidity_plot" class="plot">     </div>
</div>

</div>

б / графики "

<div class="row">
<div class="col-md-12">


<div class="table-responsive">
<div id="zinc_plot" class="plot">       </div>
</div>

<div class="table-responsive">
<div id="copper_plot" class="plot">     </div>
</div>

</div>

с / графы '

<div class="row">
<div class="col-md-12">


<div class="table-responsive">
<div id="temperature_plot" class="plot">       </div>
</div>

<div class="table-responsive">
<div id="velocity_plot" class="plot">       </div>
</div>

<div class="table-responsive">
<div id="depth_plot" class="plot">     </div>
</div>

</div>

Когда это работает, получается правильный помощник по форме, он не получает правильный файл .js. Он получит их все, вызывая всевозможные проблемы, включая проблемы с разбором.

У меня они есть в каждом из моих файлов Js (идентификатор сюжета - это первый svg на каждой странице, где loadData - это то, где находятся ajax и d3): 

$(document).ready(function(){ 
    if($("#" + "zinc_plot").length == 1) {
        loadData();
    }

});

Это не совсем работает. Произойдет следующее: файл «а» будет правильно отображать все свои диаграммы, но затем будет отображать их еще 2 раза (1 раз для каждого дополнительного файла js), но без правильного форматирования времени и строк.

Итак, в моем файле .js я хочу сказать, что он загружает данные только в случае необходимости. Будет ли изменение вышеуказанного условия моей лучшей ставкой? Дайте мне знать, если я смогу предоставить больше информации, большое спасибо!

Дополнительная информация:

Это файл 'a.js' 

// ajax call to fetch json
var loadData = function() {
  var path = window.location.pathname.split('/');
  var site_id = path[path.length - 1];
  $.ajax({
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    url: '/a.json?site_id=' + site_id + '&graphable=true',
    dataType: 'json',
    success: function(data) {
      console.log(data)
      var alldata = [];
      var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ");
      data.forEach(function(data) {
        //this algorithm just sorts it into a nested array for graphing purposes
        var eachmp = []
        for (var idx = 0; idx < data.scute_reports.length; idx++) {
          var thisobject = {}
          thisobject.name = data.name
          thisobject.inspected_at = parseTime(data.scute_reports[idx].inspected_at)
          thisobject.zinc_data = data.scute_reports[idx].zinc
          thisobject.copper_data = data.scute_reports[idx].copper
          eachmp.push(thisobject)
        }
        alldata.push(eachmp)
      });

      console.log(alldata)
      formatAllThree(alldata)
    },

    failure: function(result) {
      error();
      console.log("fail")
    }
  });
};

function error() {
  console.log("Something went wrong!");
}

function formatAllThree(data) {
  drawLinePlot_flow(data);
  drawLinePlot_ph(data);
  drawLinePlot_turbidity(data);

  function drawLinePlot_flow(data) {
    var svg = d3.select("#flow_plot").append("svg")
    //d3 code
  }

  function drawLinePlot_ph(data) {
    var svg = d3.select("#ph_plot").append("svg")
    //d3 code
  }

  function drawLinePlot_turbidity(data) {
    var svg = d3.select("#turbidity_plot").append("svg")
    //d3 code
  }

}

// fetch data on page load
$(document).ready(function() {
  if ($("#" + "flow_plot").length == 1) {
    loadData();
  }
});

Это файл 'b' 

// ajax call to fetch json
var loadData = function() {
  var path = window.location.pathname.split('/');
  var site_id = path[path.length - 1];
  $.ajax({
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    url: '/lab_forms.json?site_id=' + site_id + '&graphable=true',
    dataType: 'json',
    success: function(data) {
      console.log(data)
      var alldata = [];
      var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ");
      data.forEach(function(data) {
        //this algorithm just sorts it into a nested array for graphing purposes
        var eachmp = []
        for (var idx = 0; idx < data.scute_reports.length; idx++) {
          var thisobject = {}
          thisobject.name = data.name
          thisobject.inspected_at = parseTime(data.scute_reports[idx].inspected_at)
          thisobject.zinc_data = data.scute_reports[idx].zinc
          thisobject.copper_data = data.scute_reports[idx].copper
          eachmp.push(thisobject)
        }
        alldata.push(eachmp)
      });

      console.log(alldata)
      formatAllThree(alldata)
    },

    failure: function(result) {
      error();
      console.log("fail")
    }
  });
};

function error() {
  console.log("Something went wrong!");
}

function formatAllThree(data) {
  drawLinePlot_zinc(data);
  drawLinePlot_copper(data);

  function drawLinePlot_Zinc(data) {
    var svg = d3.select("#zinc_plot").append("svg")
    //d3 code
  }

  function drawLinePlot_Copper(data) {
    var svg = d3.select("#copper_plot").append("svg")
    //each js file calls different id's
    //d3 code
  }
}

// fetch data on page load
$(document).ready(function() {
  if ($("#" + "zinc_plot").length == 1) {
    loadData();
  }
});

Это файл 'c' 

// ajax call to fetch json
var loadData = function() {
  var path = window.location.pathname.split('/');
  var site_id = path[path.length - 1];
  $.ajax({
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    url: '/lab_forms.json?site_id=' + site_id + '&graphable=true',
    dataType: 'json',
    success: function(data) {
      console.log(data)
      var alldata = [];
      var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ");
      data.forEach(function(data) {
        //this algorithm just sorts it into a nested array for graphing purposes
        var eachmp = []
        for (var idx = 0; idx < data.scute_reports.length; idx++) {
          var thisobject = {}
          thisobject.name = data.name
          thisobject.inspected_at = parseTime(data.scute_reports[idx].inspected_at)
          thisobject.zinc_data = data.scute_reports[idx].zinc
          thisobject.copper_data = data.scute_reports[idx].copper
          eachmp.push(thisobject)
        }
        alldata.push(eachmp)
      });

      console.log(alldata)
      formatAllThree(alldata)
    },

    failure: function(result) {
      error();
      console.log("fail")
    }
  });
};

function error() {
  console.log("Something went wrong!");
}

function formatAllThree(data) {
  drawLinePlot_temp(data);
  drawLinePlot_velocity(data);
  drawLinePlot_depth(data);

  function drawLinePlot_temp(data) {
    var svg = d3.select("#temperature_plot").append("svg")
    //d3 code
  }

  function drawLinePlot_velocity(data) {
    var svg = d3.select("#velocity_plot").append("svg")
    //each js file calls different id's
    //d3 code
  }

  function drawLinePlot_depth(data) {
    var svg = d3.select("#depth_plot").append("svg")
    //each js file calls different id's
    //d3 code
  }
}

// fetch data on page load
$(document).ready(function() {
  if ($("#" + "temperature_plot").length == 1) {
    loadData();
  }
});

1 Ответ

0 голосов
/ 06 июля 2018

Итак, я выяснил, что происходит и почему файлы странно взаимодействуют.

То, что происходило, было в каждой функции loadData в каждом из файлов javaScript, я бы вызвал функцию, которая содержала весь мой код d3. 

formatAllThree(alldata)

тогда ... 

function formatAllThree(data) {
 //all of my d3 code
}

Проблема в том, что: Эта функция имеет одно и то же имя в каждом файле. Первая будет загружаться и отображаться соответствующим образом, но как только во втором вызовется formatAllThree (alldata) файл, он вернется к первому разу, когда функция была записана, в первом файле. Он никогда не запустит мой код d3 в других файлах.

Чтобы исправить это, я дал этой функции свое имя в каждом файле JavaScript, т.е. 

formatAllThree_A(alldata)

Мне не нужно вставлять условное выражение в конец каждого файла JavaScript, который проверяет, существует ли в представлении определенный идентификатор, например: 

$(document).ready(function() {
    if ($("#" + "zinc_plot").length == 1) {
    loadData();
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...