如何使用Rails数据库中的数据创建d3图

Hei*_*erg 2 javascript ruby-on-rails d3.js

我学会了使用d3书创建d3图形,其中所有数据集都直接包含在<script>标记中,而标记又包含在html正文中.

我现在想在我的rails应用程序中使用d3,但我不知道如何:

  1. 将数据从我的Rails数据库传递到我的d3脚本
  2. 如何"偏爱"javascript?我已经看过关于"不引人注目的javascript"的材料,但它们通常是关于AJAX表单提交的,我很难将其转换为图形绘制(即包括<div>使用app数据绘制的图形).

目前还没有解决这两个问题的答案,所以希望这成为未来Google员工的参考.

lll*_*lll 6

在我看来,通过AJAX请求数据将是"最干净"的方式.您可以使用jQuery的ajax方法来执行GET请求来说'/get_data.json'(您必须添加到您的routes.rb),这将返回带有数据的JSON.

像这样的东西.

//your JS file
$.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: '/get_data',
            dataType: 'json',
            data: "{}", 
            success: function (received_data) {
               var div_where_to_draw = "div.mygraph";
               your_d3_function(div_where_to_draw, received_data);
            },
            error: function (result) {
            }
    });
function draw_histogram(where_to_draw, data_to_draw){
  //Your d3js code here
}
Run Code Online (Sandbox Code Playgroud)

(注意这个JS代码是这里的答案的重拍)

这就是你的控制器提供数据的样子(注意我做了一个新的控制器,你可能不想这样做,只是在现有的控制器中使用一个新动作):

#app/controllers/data_controller.rb
class DataController < ApplicationController
  def get_data
    respond_to do |format|
      format.json {}
    end
  end
end
Run Code Online (Sandbox Code Playgroud)

这就是您的数据的样子:

#app/views/data/get_data.json
[1,1,2,3,5,8,13,21,34,55]
Run Code Online (Sandbox Code Playgroud)