在Rails中使用D3 ActiveAdmin

我在Ruby-on-Rails 4中構建應用程序。我設計了一個使用ActiveAdmin的管理站點。它工作的很好，但現在我想通過渲染一個局部圖使用D3.js爲我的索引頁添加一個圖表。 D3.js圖書館給我留下了非常深刻的印象，但我真的很新，因此我一直在嘗試一些開發作爲培訓。在Rails中使用D3 ActiveAdmin

我還沒有找到關於這個特定情況在互聯網上的任何東西，所以我嘗試從這個不錯的教程：Using D3 in Rails。本教程中包含了D3.js庫。我的部分看起來像這樣：

#app/views/admin/_chart.html.erb 
<h3>HELLO WORLD!</h3> 
<svg id="graph"></svg>

和管理user.file看起來是這樣的：

#app/admin/user.rb 
collection_action :data, method: :post do 
    respond_to do |format| 
      format.json { 
      render :json => [1,2,3,4,5] 
      } 
    end 
    end

然後，我有以下資產的腳本/ JavaScript的/ graph.js：

$.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"); 
}

當我顯示頁面時，部分頁面正確加載（至少是標題），並且圖表還有空間，但是它是空的。我在控制檯中沒有錯誤，所以我甚至可能不會上傳graph.js文件，或者數據可能不會傳輸到聊天記錄中。或兩者。無論如何，我真的不知道爲什麼不明白，所以你的幫助將非常感激。謝謝

[編輯]

我在route.rb文件改變了路線：

resources :users do 
    collection do 
    ... 
    get :data , :defaults => { :format => 'json' } 
    end 
end

然後，我改變從圖中的js文件的名稱.js到users.js。於是，我改變的URL：「用戶/數據」：

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

這樣我可以顯示在我的應用程序的索引頁的圖表。但是，我仍然無法在ActiveAdmin中顯示它...我想知道是否因爲我沒有在ActiveAdmin（供應商文件夾內）中正確包含d3或者它是否是路由問題。

來源

2015-04-01 stemcell

好吧，我找到了一種方法來在我的Active Admin頁面中顯示一個簡單的D3條形圖。

這是我做的，以顯示對/管理/用戶頁圖表：

#app/admin/user.rb 

ActiveAdmin.register User do 
... 
    collection_action :data, :method => :get do 
     respond_to do |format| 
     format.json { 
     render :json => [1,2,3,4,5] 
     } 
     end 
    end 

#app/views/admin/_charts.html.erb 

<h3>User chart</h3> 
<svg id="graph"></svg> 
<script type="text/javascript"> 
$.ajax({ 
      type: "GET", 
      contentType: "application/json; charset=utf-8", 
      url: 'users/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"); 
} 
</script>

然後，將其顯示在儀表盤：

#app/admin/dashboard.rb 

ActiveAdmin.register_page "Dashboard" do 
... 
    section do 
    div do 
     render 'admin/users/charts' 
    end 
    end 
... 
end

我希望這將是有益的爲你。現在，我將嘗試將數據傳遞給另一種圖表。

來源

2015-04-03 13:56:04 stemcell

在Rails中使用D3 ActiveAdmin

回答

相關問題