Javascript 一个简单的d3图可以'；不要装在铁轨上

我正在学习在rails应用程序中构建D3图形。但不知怎的，我无法加载图表。 所以基本上，我所做的就是从D3Github下载d3.zip。将d3.js和d3.min.js放在assets/javascript/中，并在application.js中同时要求它们

在我看来，这是d3代码

<% content_for(:inline_javascript) do %> 
      <script> 
        var w = 200,
        h = 200,
        p = 10;

        var data = [{count:100,year:1999},
            {count:240,year:2010},
            {count:290,year:2009}];

        var bar_height = d3.scale.linear()
            .domain(d3.extent(data, function(d) { return d.count; }) )  // min max of count
            .range([p,h-p]);  // min max of area to plot in


        var bar_xpos = d3.scale.linear()
            .domain(d3.extent(data, function(d) { return d.year; }) )  // min max of year
            .range([p,w-p]);  // min max of area to plot in


        var svg = d3.select("svg")
            .attr("width", w)
            .attr("height", h);

        svg.selectAll("rect")
            .data(data)
            .enter().append("rect")
            .attr("x", function(d) {
                return bar_xpos(d.year); })
            .attr("y", function(d) { 
                return h - bar_height(d.count); })
            .attr("width", 10)
            .attr("height", function(d) {return bar_height(d.count); })
            .attr("fill", "steelblue")
      </script>
    <%end%>

var w=200，
h=200，
p=10；
变量数据=[{计数：100，年份：1999}，
{计数：240，年份：2010}，
{计数：290，年份：2009}]；
var bar_height=d3.scale.linear（）
.domain（d3.extent（数据，函数（d）{return d.count；}））//最小最大计数
.范围（[p，h-p]）；//要绘制的面积的最小值和最大值
var bar_xpos=d3.scale.linear（）
.domain（d3.extent（数据，函数（d）{return d.year；}））//年的最小最大值
.范围（[p，w-p]）；//要绘制的面积的最小值和最大值
var svg=d3.选择（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“rect”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回条（d.年）；}
.attr（“y”，函数（d）{
返回h-杆高度（d.count）；}）
.attr（“宽度”，10）
.attr（“高度”，函数（d）{返回条高度（d.count）；}）
.attr（“填充”、“钢蓝”）

但是页面上什么也没有显示。在浏览器上检查元素时没有错误。所以我想知道是否有人能告诉我我所做的有什么不对

谢谢

编辑：

最后我在rails中发现，d3图形需要一个占位符，因此需要一个id来标识该图形。这个想法是这样的。但我只需要添加一行

 <svg class="chart"></svg>

---

图表显示在页面上

D3的方法有点类似于jQuery。除非你明确要求，否则它不会做任何事情

要首先进行任何可视化，需要选择要操作的节点。 D3提供了实现这一点的方法和步骤

---

如果当前文档中没有与指定选择器匹配的元素，则返回空选择，因此不会显示错误。

您只需要d3.min.js。不需要放d3.js。@ram谢谢！我删除了d3.js。。但还是没有图表显示……你能试试这个吗？添加该行console.log（d3.version）；在var w=200之前。。。让我在浏览器控制台中知道它的结果（按F12）。@ram-hmm我添加了console.log（d3.version）。浏览器控制台中没有任何内容，只有警告“event.returnValue已弃用。请改用标准event.preventDefault（）”。不确定是否相关。但我在github中下载了最新版本3.4.4。这就是你想知道的吗？@ram my bad，我加错了一页。结果是一样的。3.4.4感谢您的解释！这很有帮助！