Including D3 in an ERB loop

Question

I have a partial called _index.html.erb

<% metric_objects.each do |metric_object| %>
  <% if metric_object.histogram.has_key? 0 %>
    <%= javascript_include_tag 'iterative_metric_graph.js', metric_object %>
  <% else %>
    <!--Another type of graph-->
  <% end %>
<% end %>

It is supposed to generate a D3 bar graph for each metric_object. When I open the page, I get the error "D3 is not defined" in the console.

iterative_metric_graph.js is a file in my app/assets/javascripts/active_admin folder. It consists of the javascript code from this page: http://bl.ocks.org/mbostock/3943967 Nothing more than what is inside the script tags right now.

The issue is that D3 is not being included in iterative_metric_graph.js. I could resolve the error by putting the javascript graph code (from the link above) straight into _index.html.erb, and adding <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>, but I would much prefer to render a partial. How can I include D3 (from the web or from a file) in my javascript file?

You would need to copy and paste the D3 js into your js file. — Lars Kotthoff, Jul 09 '14 at 14:26
I'd prefer to reference the D3 file. I put it in the same folder, and it got rid of the D3 not found error, but now I'm getting an internal server error when the app tries to load these js files — Mike, Jul 09 '14 at 14:46

score 1 · Accepted Answer · edited May 23 '17 at 10:26

To include D3 you can just download it and stick it in you app/assets/javascripts directory. Then add the following to your application.js file:

//= require d3.v3.min

Alternatively you could try to put it in vendor/assets/... but there's a little more work involved in getting that to play nice with the asset pipeline. (more info here: Rails asset pipeline: Standard way for including all /vendor/assets/javascripts/?)

Including D3 in an ERB loop

1 Answers1