在 Rails ActiveAdmin 中使用 D3

Question

我正在 Ruby-on-Rails 中构建应用程序 4. 我使用 ActiveAdmin 设计了一个管理站点。它工作得很好，但现在我想通过局部渲染使用 D3.js 将图表添加到我的索引页面。 D3.js 库给我留下了深刻的印象，但我对它真的很陌生，所以我一直在尝试一些开发作为培训。

我没有在互联网上找到任何关于这个具体案例的信息，所以我尝试从这个很好的教程中找到：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

然后我在 assets/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 文件，或者数据可能不会传输到聊天中。或两者。无论如何，我真的不知道为什么都不明白，所以非常感谢你的帮助。谢谢

S.

[编辑]

我已经更改了 route.rb 文件中的路由：

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

然后我把js文件的名字从graph.js改成了users.js。然后，我将 url 更改为：'users/data':

    $.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（在供应商文件夹中）或者是否是路由问题。

Answer 1

好的，我找到了一种在我的活动管理页面中显示简单 D3 条形图的方法。

这就是我在 /admin/users 页面中显示图表的方法：

#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

希望这对您有用。现在，我要尝试将数据传递给另一种图表。

在 Rails ActiveAdmin 中使用 D3

Using D3 in Rails ActiveAdmin

javascript

json

ruby-on-rails

d3.js

activeadmin