Question

我正在学习d3.js，并且试图从.csv文件（学生的姓名和他们的成绩）创建条形图。我在下面编写了代码，但是它不会生成任何条形图，而且我也不明白为什么。你能帮忙吗？谢谢！

这是我的.csv文件：

名称，等级约翰95 詹妮弗96 汉克100 克里斯蒂娜（98）保罗88 艾米76 劳尔72 萨曼莎（70）肖恩68 90岁的艾比萨利85

  <script type="text/javascript">


    d3.csv("votiOne.csv", function(data) {

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

      canvas.selectAll("rect")
          .data(data)
          .enter()
              .append("rect")
              .attr("width", function (d) { return d.Grade; })
              .attr("height", 50)
              .attr("y", function (d, i) { return i * 50; })
              .attr("fill", "blue");

    })


  </script>

Answer 1

它可以根据您使用的d3版本来工作：

对于d3版本4，该代码应该可以工作：

...
<script src="https://d3js.org/d3.v4.min.js"></script>
...
d3.csv("votiOne.csv", function(data) {
...

对于d3版本5，代码使用的是Promise（另请参见此SO Question），如下所示：

...
<script src="https://d3js.org/d3.v5.min.js"></script>
...
d3.csv("votiOne.csv").then(function(data) {
...

完整的示例：

我无法从d3.js中的csv文件生成条形图

1 个答案: