如何使用d3.js在我的Rails5應用程序中創建條形圖

Question

我在終端中不斷收到此錯誤。

我跟着這個教程http://www.overfitted.com/blog/?p=302

入門使用 「/數據」 爲:: 1，在2016年7月26日21時55分四十三秒+0100

的ActionController :: RoutingError（無路由匹配[GET ]/data「）： actionpack（4.2.6）lib/action_dispatch/middleware/debug_exceptions.rb：21：在call' web-console (2.3.0) lib/web_console/middleware.rb:28:in塊中調用' web-console（2.3.0）lib/web_console/middleware.rb：18 ：catch' web-console (2.3.0) lib/web_console/middleware.rb:18:in調用' actionpack（4.2.6）lib/action_dispatch/middleware/show_exceptions.rb：30：在call' railties (4.2.6) lib/rails/rack/logger.rb:38:in call_app' railties（4。 2.6）lib/rails/rack/logger.rb：20：在block in call' activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:in塊中標記爲' activesupport（4.2.6）lib/active_support/tagged_logging.rb：26：tagged' activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:in' railties（4.2.6）lib/rails/rack/logger.rb：20：在call' actionpack (4.2.6) lib/action_dispatch/middleware/request_id.rb:21:in調用' rack（1.6.4）lib/rack/methodoverride.rb：22：在call' rack (1.6.4) lib/rack/runtime.rb:18:in調用' 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:in call' actionpack（4.2.6）lib/action_dispatch/middleware/static.rb：120：in call' rack (1.6.4) lib/rack/sendfile.rb:113:in call' railties（4.2.6）lib/rails/engine.rb：518：在call' railties (4.2.6) lib/rails/application.rb:165:in中調用' rack（1.6.4）lib/rack/content_length.rb：15：在call' puma (3.6.0) lib/puma/configuration.rb:225:in調用' puma（3 .6.0）LIB/PUMA/server.rb：578：在handle_request' puma (3.6.0) lib/puma/server.rb:415:in process_client ' PUMA（3.6.0）LIB/PUMA/server.rb：275：在spawn_thread block in run' puma (3.6.0) lib/puma/thread_pool.rb:116:in塊'

渲染/用戶/ 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） Rendered/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") 
} 

MY ROUTES

 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(); 
     } 
    });