Question

我正在学习在rails应用程序中构建D3图。但不知怎的，我无法加载图表。基本上，我所做的是从d3 github下载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%>

但页面没有显示任何内容。当我在浏览器上检查元素时没有错误。所以我想知道是否有人可以告诉我我做了什么错了？

谢谢！

编辑：

所以最后我发现在rails中，我需要有一个d3图的占位符，所以它需要一个id来识别图形。这个想法是这样的。但我只需要添加一行，

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

图表显示在页面上！

Answer 1

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

首先要进行任何可视化，需要选择要操作的节点。 D3为此提供了select和selectAll方法。

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

一个简单的d3图不能加载到轨道中

1 个答案: