javascript - 我们如何在 ruby​​ on Rails 文档中使用 d3.js？

Question

我一直在尝试在我的网站中显示图表。我目前只看到 axis，所以我不确定我是否搞乱了 d3.js 和 ruby​​ on Rails 之间的关系。

我目前拥有的是:

$(document).on('ready', function() {
  var dataset = gon.data.map(function(datapoint) {
    datapoint.date = Date.parse(datapoint.date);
    return datapoint;
  });

  var lineGen = d3.svg.line()
  .x(function(d) {
    console.log(d.date)
    return d.date;
  })
  .y(function(d) {
    return d.weight;
  })
  .interpolate("linear");

  var vis = d3.select("#visualization"),
  WIDTH = 600,
  HEIGHT = 500,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
  xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]),
  yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,250]),

  xAxis = d3.svg.axis().scale(xScale),
  yAxis = d3.svg.axis().scale(yScale);

  vis.append("svg:g")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);

  yAxis = d3.svg.axis().scale(yScale).orient("left");
  vis.append("svg:g")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);

  vis.append('svg:path')
    .attr('d', lineGen(dataset))
    .attr('stroke', 'green')
    .attr('stroke-width', 2);
});

但我看到的只是图表的轴。

我的用户 Controller 中有:

def show
  @user = User.find(params[:id])
  @weights = Weight.where(user_id: @user.id)
  start_date = Date.parse(@weights.order("created_at").first.date)
  end_date = Date.parse(@weights.order("created_at").last.date)
  @graph_weight_date = Array.new
  (start_date..end_date).each do |day|
    if defined?  @weights.where(date: day.to_s).first.weight
       @graph_weight_date << { :date => day, :weight => @weights.where(date: day.to_s).first.weight}
    else
      @graph_weight_date << { :date => day, :weight => nil}
    end
  end
  gon.data = @graph_weight_date
end

在我的 users/show.html.erb 中

<svg id ="visualization" width="600" height="500"></svg>

我不知道如何正确地将数据从 ruby​​ 提取到 d3.js

Answer 1

rails 中未内置 D3 支持。当您将 D3 加载到页面中时，您所做的就是使用 Javascript 发送库。在用户的浏览器上，他们可以访问您加载到页面上的任何内容(或使用 AJAX 获取)。

因此，如果您使用 Rails 填充页面，您的 DOM 将具有一些 HTML 元素，其中包含您将在 D3 中使用的数据。

在您的 D3 脚本中，只要数据位于页面上，数据的来源就不应该有太大区别。

也许您可以尝试在不依赖 Rails 的情况下测试您的 D3 代码。编写一个静态 HTML 页面并包含测试 D3 代码所需的任何数据。然后调试D3。使代码正常运行后，您可以用 Rails 中的实时数据替换测试数据。