Rails5アプリケーションでd3.jsを使用して棒グラフを作成する方法

Question

端末でこのエラーが発生し続ける。

私はこのチュートリアルhttp://www.overfitted.com/blog/?p=302

は、2016年7月26日に:: 1夜9時55分43秒0100

ActionControllerのために "/データを" GET開始に続い:: RoutingError（Noルートマッチ[GET ]）： web-console（2.3.0）lib/web_console/middleware.rb：18： Webコンソール（2.3.0）lib：/ action_dispatch/middleware/：catch' web-console (2.3.0) lib/web_console/middleware.rb:18:inコール ' アクションパック（4.2.6）lib/action_dispatch /ミドルウェア/ show_exceptions.rb：30：call' railties (4.2.6) lib/rails/rack/logger.rb:38:in call_app' railties（4。 （4.2.6）lib/active_support/tagged_logging.rb：26：tagged' activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:inタグ「 」のlib/rails/rack/logger.rb：20：block in call' activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:inタグ内のブロックlibs /レール/ラック/ logger.rb：20：call' actionpack (4.2.6) lib/action_dispatch/middleware/request_id.rb:21:in ラック（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/（0126）を入力してください： libs/action_dispatch/middleware/static.rb：120：call' rack (1.6.4) lib/rack/sendfile.rb:113:inで呼び出す ' railties（4.2.6）lib/rails/engine.rb：518： call' railties (4.2.6) lib/rails/application.rb:165:in ' ラック（1.6.4）lib/rack/content_length.rb：15：call' puma (3.6.0) lib/puma/configuration.rb:225:inで電話する' プーマ（3 .6.0）LIB/PUMA/server.rb：578：

レンダリング/ユーザ/ omorhefere/handle_request' puma (3.6.0) lib/puma/server.rb:415:in process_client '：275 block in run' puma (3.6.0) lib/puma/thread_pool.rb:116:inブロック内spawn_threadで PUMA（3.6.0）LIB/PUMA/server.rb' で.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 

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