Javascript Rails中的D3图形：多个Js文件重叠

我有三个.js文件，它们应该以一定的顺序在视图上呈现d3折线图

问题：当两个文件都需要在同一视图上显示图形时，如何使.js文件不覆盖另一个文件

它们是分开的，因为它们提取不同的数据

如果“a”通过ajax调用找到数据，则文件“a”和“b”应呈现图形。如果不是，则应呈现文件“c”

他们将独立工作！但当所有文件都存在时，它们要么不会加载，要么一个将加载三次：/

主要观点：

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

}))

这不太管用。将要发生的是，文件“a”将正确显示其所有图表，但随后将再显示2次（每个附加js文件显示1次），但没有正确的时间格式和行

因此，在我的.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();
  }
});

//获取json的ajax调用
var loadData=function（）{
var path=window.location.pathname.split（'/'）；
var site_id=path[path.length-1]；
$.ajax({
键入：“GET”，
contentType:'application/json；charset=utf-8'，
url:'/a.json？site_id='+site_id+'&grapable=true'，
数据类型：“json”，
成功：功能（数据）{
console.log（数据）
var-alldata=[]；
var parseTime=d3.timeParse（“%Y-%m-%dT%H:%m:%S.%LZ”）；
data.forEach（函数（数据）{
//该算法只是将其排序到一个嵌套数组中，以便于绘制图形
var eachmp=[]
对于（var idx=0；idx

这是文件“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();
  }
});

//获取json的ajax调用
var loadData=function（）{
var path=window.location.pathname.split（'/'）；
var site_id=path[path.length-1]；
$.ajax({
键入：“GET”，
contentType:'application/json；charset=utf-8'，
url:'/lab_forms.json？site_id='+site_id+'&grapable=true'，
数据类型：“json”，
成功：功能（数据）{
console.log（数据）
var-alldata=[]；
var parseTime=d3.timeParse（“%Y-%m-%dT%H:%m:%S.%LZ”）；
data.forEach（函数（数据）{
//该算法只是将其排序到一个嵌套数组中，以便于绘制图形
var eachmp=[]
对于（var idx=0；idx

这是文件“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();
  }
});

//获取json的ajax调用
var loadData=function（）{
var path=window.location.pathname.split（'/'）；
var site_id=path[path.length-1]；
$.ajax({
键入：“GET”，
contentType:'application/json；charset=utf-8'，
url:'/lab_forms.json？site_id='+site_id+'&grapable=true'，
数据类型：“json”，
成功：功能（数据）{
console.log（数据）
var-alldata=[]；
var parseTime=d3.timeParse（“%Y-%m-%dT%H:%m:%S.%LZ”）；
data.forEach（函数（数据）{
//该算法只是将其排序到一个嵌套数组中，以便于绘制图形
var eachmp=[]
对于（var idx=0；idx$(document).ready(function(){ 
    if($("#" + "zinc_plot").length == 1) {
        loadData();
    }

// 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();
  }
});

// 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();
  }
});

// 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();
  }
});

formatAllThree(alldata)

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

formatAllThree_A(alldata)

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