如何在rails中将erb页面元素传递给javascript

Question

我有一个强制控制的d3.js图。 在它上面有节点。 单击某个节点时，局部显示有关该节点的详细信息。 该节点代表一个用户，详细信息取自数据库中的一个表-User表。 我有这个工作。

其中三列包含整数，我希望将其显示在部分中的另一个d3.js图上。

局部对象接收一个名为@user的对象，该对象包含该用户来自User表的所有数据。

我想将@ user.scorecolumn1，@ userscorecolumn2和@ user.scorecolumn3传递给d3.js条形图。

到目前为止，在页面上，我已基于所选用户列出了@user中的元素列表

<ul>
    <li>Name: <%= @user.name %></li>
    <li>Email: <%= @user.email %></li>
    <li>Id: <%= @user.id %></li>
    <li>Score1 <%= @user.scorecolumn1 %></li>
<li>Score2 <%= @user.scorecolumn2 %></li>
<li>Score3 <%= @user.scorecolumn3 %></li>
</ul>

然后要使用的d3.js javascript，也使用@user

var margin ={top:20, right:30, bottom:30, left:40},
    width=960-margin.left - margin.right, 
    height=500-margin.top-margin.bottom;

// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);

//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);

var chart = d3.select("#chart")  
              .append("svg")  //append svg element inside #chart
              .attr("width", width+(2*margin.left)+margin.right)    //set width
              .attr("height", height+margin.top+margin.bottom);  //set height
var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom");  //orient bottom because x-axis will appear below the bars

var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left");

我如何把上面的值，即

<%= @user.scorecolumn1 %>
<%= @user.scorecolumn2 %>
<%= @user.scorecolumn3 %>

转换为下面的var数据，如下所示：

var data =[
  {letter: "Score1", frequency: <%= @user.scorecolumn1 %>},
  {letter: "Score2", frequency: <%= @user.scorecolumn2 %>},
  {letter: "Score3", frequency: <%= @user.scorecolumn3 %>}
];

其余代码

  x.domain(data.map(function(d){ return d.letter}));
  y.domain([0, d3.max(data, function(d){return d.frequency})]);

  var bar = chart.selectAll("g")
                    .data(data)
                  .enter()
                    .append("g")
                    .attr("transform", function(d, i){
                      return "translate("+x(d.letter)+", 0)";
                    });

  bar.append("rect")
      .attr("y", function(d) { 
        return y(d.frequency); 
      })
      .attr("x", function(d,i){
        return x.rangeBand()+(margin.left/4);
      })
      .attr("height", function(d) { 
        return height - y(d.frequency); 
      })
      .attr("width", x.rangeBand());  //set width base on range on ordinal data

  bar.append("text")
      .attr("x", x.rangeBand()+margin.left )
      .attr("y", function(d) { return y(d.frequency) -10; })
      .attr("dy", ".75em")
      .text(function(d) { return d.frequency; });

  chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate("+margin.left+","+ height+")")        
        .call(xAxis);

  chart.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate("+margin.left+",0)")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Frequency");


function type(d) {
    d.letter = +d.letter; // coerce to number
    return d;
  }

Answer 1

有一个非常简单的解决方案，只需在视图中添加数据的javascript。 确保图表的javascript代码在资产中，并直接在javascript中的视图中呈现图表的数据。

像这样：

<script>
  var data=<%= [{letter: "Score1", frequency: @user.scorecolumn1}, ...].to_json %>;  
</script>

然后您可以在d3脚本中使用该变量。

Answer 2

您可以将“分数”列的值设置为隐藏的输入字段，然后使用JS获取这些值。

首先在您的用户字段下方设置得分值：

<ul>
<li>Name: <%= @user.name %></li>
<li>Email: <%= @user.email %></li>
<li>Id: <%= @user.id %></li>
<li>Score1 <%= @user.scorecolumn1 %></li>
<li>Score2 <%= @user.scorecolumn2 %></li>
<li>Score3 <%= @user.scorecolumn3 %></li>
</ul>

<div style="display:none">
  <input id='scorecolumn1' name="scorecolumn1" value= '<%= @user.scorecolumn1 %>' >
  <input id='scorecolumn2' name="scorecolumn1" value= '<%= @user.scorecolumn1 %>' >
  <input id='scorecolumn3' name="scorecolumn1" value= '<%= @user.scorecolumn1 %>' >
</div>

然后从JS代码获取这些值：

var data =[
{letter: "Score1", frequency: $("#scorecolumn1").value },
{letter: "Score2", frequency: $("#scorecolumn2").value },
{letter: "Score3", frequency: $("#scorecolumn3").value }
];