我如何使用 d3.js 在我的 Rails5 应用程序中创建条形图

Question

我的终端一直出现这个错误。

我遵循了这个教程http://www.overfitted.com/blog/?p=302

于 2016 年 7 月 26 日开始获取 ::1 的“/数据”21:55:43 +0100

ActionController::RoutingError（没有路由匹配 [GET] "/data"）： actionpack (4.2.6) lib/action_dispatch/middleware/debug_exceptions.rb:21:in call' web-console (2.3.0) lib/web_console/middleware.rb:28:inblock in call' 网络控制台 (2.3.0) lib/web_console/middleware.rb:18:in catch' web-console (2.3.0) lib/web_console/middleware.rb:18:incall' 动作包 (4.2.6) lib/action_dispatch/middleware/show_exceptions.rb:30:in call' railties (4.2.6) lib/rails/rack/logger.rb:38:incall_app' railties (4.2.6) lib/rails/rack/logger.rb:20:in block in call' activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:inblock in tagged' activesupport (4.2.6) lib/active_support/tagged_logging.rb:26:in tagged' activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:in已标记' railties (4.2.6) lib/rails/rack/logger.rb:20:in call' actionpack (4.2.6) lib/action_dispatch/middleware/request_id.rb:21:incall' 机架 (1.6.4) lib/rack/methodoverride.rb:22:in call' rack (1.6.4) lib/rack/runtime.rb:18:incall' activesupport (4.2.6) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in call' rack (1.6.4) lib/rack/lock.rb:17:incall' 动作包 (4.2.6) lib/action_dispatch/middleware/static.rb:120:in call' rack (1.6.4) lib/rack/sendfile.rb:113:incall' railties (4.2.6) lib/rails/engine.rb:518:in call' railties (4.2.6) lib/rails/application.rb:165:incall' 机架 (1.6.4) lib/rack/content_length.rb:15:in call' puma (3.6.0) lib/puma/configuration.rb:225:incall' 美洲狮 (3.6.0) lib/puma/server.rb:578:in handle_request' puma (3.6.0) lib/puma/server.rb:415:inprocess_client' puma (3.6.0) lib/puma/server.rb:275:in block in run' puma (3.6.0) lib/puma/thread_pool.rb:116:in块 spawn_thread'

渲染 /Users/omorhefere/.rvm/gems/ruby-2.3.1@rails5.0/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/_trace.text.erb (1.1ms) 渲染 /Users/omorhefere/.rvm/gems/ruby-2.3.1@rails5.0/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/routing_error.text.erb (40.3ms)

这是我的代码：

我的控制器

    class MeController < ApplicationController
    def index

    end

    def data
     respond_to do |format|
      format.json {
       render :json => [1,2,3,4,5]
        }
     end
    end


 end

我的JAVASCRIPT

      $.ajax({
       type: "GET",
       contentType: "application/json; charset=utf-8",
       url: 'data',
       dataType: 'json',
       success: function (data) {
           draw(data);
       },
       error: function (result) {
           error();
       }
   });

function draw(data) {
 var color = d3.scale.category20b();
 var width = 420,
    barHeight = 20;

 var x = d3.scale.linear()
    .range([0, width])
    .domain([0, d3.max(data)]);

 var chart = d3.select("#graph")
    .attr("width", width)
    .attr("height", barHeight * data.length);

 var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function (d, i) {
              return "translate(0," + i * barHeight + ")";
          });

 bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1)
    .style("fill", function (d) {
               return color(d)
           })

 bar.append("text")
    .attr("x", function (d) {
              return x(d) - 10;
          })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .style("fill", "white")
    .text(function (d) {
              return d;
          });
}

function error() {
  console.log("error")
}

我的路线

       get 'me/data', :defaults => { :format => 'json' }

我已将其添加到我的 application.js 文件中。

Answer 1

我认为您只需要将 ajax 代码中的 url 更改为 "me/data"。希望有用。

$.ajax({
       type: "GET",
       contentType: "application/json; charset=utf-8",
       url: 'me/data',
       dataType: 'json',
       success: function (data) {
           draw(data);
       },
       error: function (result) {
           error();
       }
   });

我如何使用 d3.js 在我的 Rails5 应用程序中创建条形图

How do i use d3.js to create a bar chart in my Rails5 app

ruby-on-rails

d3.js

ruby-on-rails-5