Currently, I am in the process of learning D3 and my initial attempt involves showcasing a graph where I manually hard-code the json data.
To demonstrate this, I have put together a JSFiddle which you can view here: http://jsfiddle.net/Nu95q/1/
The JSFiddle successfully showcases the graph as intended.
My next goal is to incorporate this into my Rails project by passing the json data using an ajax link. Upon clicking the link, I aim to generate the json data in the controller and then swap out the graph with the new one.
The D3 code resides in
assets/javascripts/my_controller.js.coffeeThis snippet illustrates what I have in my controller:
def identification_item
@sii = params[:sii_id]
@fragments = SpectrumIdentificationItem.find(@sii).fragments
respond_to do |format|
format.js { render json: @fragments }
end
end
Upon inspecting Chrome's Network panel, it confirms that a json object is generated with the accurate data.
At this point, my query is on how I can access this json variable in D3. I have attempted to replace the hardcoded variable with the json generated in the controller like so:
jsonFragmentIons = @fragments
However, it appears that @fragments is inaccessible in
assets/javascripts/my_controller.js.coffee(I have explored SO for information on "accessing json in D3," yet the questions I've looked at mainly pertain to reading a .json file or utilizing a static variable containing the json rather than a dynamic json object)
Furthermore, it is possible that I may be missing fundamental concepts regarding how json data is exchanged between the client and server sides due to being relatively new to this field. Therefore, any guidance provided would be greatly appreciated.