更新

Question

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

模型是

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

和控制器

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

最后是页面index.html

 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .node {
   stroke: #fff;
   stroke-width: 1.5px;
 }

 .link {
   stroke: #999;
   stroke-opacity: .6;
 }

 </style>
 <body>
 <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.json", 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>

显然它必须是行

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

我需要更改对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>

当我这样做时，我看到的是json结果，它并没有包含在index.html.erb中。我不确定为什么。我已编辑上面的代码以反映我已更改的内容

Answer 1

您需要使用AJAX查询端点：

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

然后

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

如何传递渲染：json =＆gt;到d3.js

更新

1 个答案: