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

Question

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

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

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

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

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

主视图：

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

表单助手：

'a / graphs'

<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>

'b / graphs'

<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>

'c / graphs'

<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文件中都有这些文件（图ID是每个页面上的第一个“ svg”，其中“ loadData”是ajax和d3所在的位置）：

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

}）;

效果不佳。将会发生的是，文件“ a”将正确显示其所有图表，但随后将显示两次以上（每个其他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();
  }
});

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

Answer 1

所以我弄清楚了发生了什么，以及为什么文件交互异常。

在每个javaScript文件中的每个loadData函数中发生了什么，我将调用一个包含所有d3代码的函数。

formatAllThree(alldata)

然后...

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

问题是：该函数在每个文件中都有相同的名称。第一个函数将相应地加载并显示，但是一旦调用 formatAllThree（alldata）第二个文件，它将跳回到第一个文件中第一次写入该函数的位置。永远不会在其他文件中运行我的d3代码。

要解决此问题，我在每个JavaScript文件中为该函数指定了不同的名称，即

formatAllThree_A(alldata)

我不需要在每个JavaScript文件的底部放置一个条件，以查看视图上是否存在某个ID，例如：

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