Ruby on rails 如何传递呈现：json=>；到d3.js_Ruby On Rails_Json_D3.js

Ruby on rails 如何传递呈现：json=>；到d3.js

ruby-on-rails json d3.js

Ruby on rails 如何传递呈现：json=>；到d3.js,ruby-on-rails,json,d3.js,Ruby On Rails,Json,D3.js,我试图将json的输出传递到一个d3.js图，但我真的不明白如何引用从我的控制器生成的json class UserController < ApplicationController def index render :json => User.including_relationships end end 模型是 class User < ActiveRecord::Base has_many :relationships end class U

我试图将json的输出传递到一个d3.js图，但我真的不明白如何引用从我的控制器生成的json

 class UserController < ApplicationController
   def index
    render :json =>  User.including_relationships
   end
end

模型是

class User < ActiveRecord::Base
has_many :relationships
end

class User
  def self.including_relationships
     User.joins("INNER JOIN relationships ON users.id = relationships.user_id").select("users.name, relationships.user_id, relationships.followsid,users.value").each_with_object(Hash.new{|h, k| h[k] =   []}) do |a, obj| 
       obj['nodes'] << a.slice('name')
      obj['links'] << a.slice('user_id', 'followsid', 'value')
     end
  end
 end

我需要更改对json的引用，但我不知道如何更改

更新我已经按照这里的建议添加了ajax

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Basic HTML5 Template</title>
   <link href="stylesheets/style.css" rel="stylesheet" type="text/css" media="screen" />
   <script src="example.js"></script>
 </head>
 <body>
 <script>
 $.ajax({
   type: 'GET', 
   url: 'localhost:3000/user', 
   success: function(data) {
     var miserables = data
   }
 })

 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>

 var width = 960,
     height = 500;

 var color = d3.scale.category20();

 var force = d3.layout.force()
     .charge(-120)
     .linkDistance(30)
     .size([width, height]);

 var svg = d3.select("body").append("svg")
     .attr("width", width)
     .attr("height", height);

 d3.json(miserables, function(error, graph) {
   force
       .nodes(graph.nodes)
       .links(graph.links)
       .start();

   var link = svg.selectAll(".link")
       .data(graph.links)
     .enter().append("line")
       .attr("class", "link")
       .style("stroke-width", function(d) { return Math.sqrt(d.value); });

   var node = svg.selectAll(".node")
       .data(graph.nodes)
     .enter().append("circle")
       .attr("class", "node")
       .attr("r", 5)
       .style("fill", function(d) { return color(d.group); })
       .call(force.drag);

   node.append("title")
       .text(function(d) { return d.name; });

   force.on("tick", function() {
     link.attr("x1", function(d) { return d.source.x; })
         .attr("y1", function(d) { return d.source.y; })
         .attr("x2", function(d) { return d.target.x; })
         .attr("y2", function(d) { return d.target.y; });

     node.attr("cx", function(d) { return d.x; })
         .attr("cy", function(d) { return d.y; });
   });
 });

 </script>

 </script>

 </body>
 </html>


基本HTML5模板
$.ajax({
键入：“GET”，
url:'localhost:3000/用户'，
成功：功能（数据）{
var悲惨=数据
}
})
可变宽度=960，
高度=500；
var color=d3.scale.category20（）；
var-force=d3.layout.force（）
。收费（-120）
.linkDistance（30）
.尺寸（[宽度、高度]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（可怜虫，函数（错误，图形）{
力
.nodes（图.nodes）
.links（graph.links）
.start（）；
var link=svg.selectAll（“.link”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
var node=svg.selectAll（“.node”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，5）
.style（“fill”，函数（d）{返回颜色（d.group）；}）
.呼叫（强制拖动）；
node.append（“标题”）
.text（函数（d）{返回d.name；}）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
});
});

当我这样做时，我看到的只是json结果，它没有包含在index.html.erb中。我不知道为什么。我编辑了上面的代码以反映我所做的更改

您需要使用AJAX查询端点：

$.ajax({
  type: 'GET', 
  url: 'your_url', 
  success: function(data) {
    var miserables = data
  }
})

然后

d3.json(miserables, function(error, graph) {

因此，“your_url”应该是我调用render=>：json的控制器类？否。“your_url”应该是路由到控制器的url。也就是“localhost:3000/用户”，如果它是开发模式的话。有点混乱。ajax如何从var=data中知道“数据”是什么。这是否必须指定控制器中类的名称？控制器使用json数据进行响应：

render:json=>User.include_relationships

。您可以通过url调用控制器方法。您可以阅读更多关于MVC的内容，但如果我有两个类都在同一个控制器中返回json呢？ajax如何知道调用哪一个“数据”。

$.ajax({
  type: 'GET', 
  url: 'your_url', 
  success: function(data) {
    var miserables = data
  }
})

d3.json(miserables, function(error, graph) {