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

How to create d3 graph using data from Rails database

本文关键字：数据 创建 d3 何使用 Rails 数据库      更新时间：2023-09-26

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

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

  1. 将数据从我的 Rails 数据库传递到我的 d3 脚本
  2. 如何"部分退出"javascript？我看过关于"不显眼的javascript"的材料，但它们通常是关于AJAX表单提交的，我很难将其转换为图形绘制(即包括使用应用程序数据绘制图形的<div>(。

目前还没有解决这两个问题的答案，所以希望这能成为未来谷歌员工的参考。

在我看来，

通过 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
}

(注意，这个JS代码是这里答案的翻版(

这就是提供数据的控制器的外观(注意，我创建了一个新控制器，您可能不想这样做，而只是在现有控制器中使用新操作(：

#app/controllers/data_controller.rb
class DataController < ApplicationController
  def get_data
    respond_to do |format|
      format.json {}
    end
  end
end

这就是您的数据的样子：

#app/views/data/get_data.json
[1,1,2,3,5,8,13,21,34,55]
相关文章：