使用console.log时,代码可以加载数据,但是尝试绘制

时间:2019-05-03 17:15:54

标签: d3.js

我正在阅读第二版《 D3.js实际应用》 ,并且无法复制需要加载“ cities.csv”的任何示例。我正在为此使用D3 v5.9.2。

我已经能够以以下方式通过本地服务器成功加载数据(我认为吗?):

d3.csv("cities.csv", (data) => {

   console.log(data)

   });

在控制台中,我可以看到所有行均已记录。但是,如果我尝试从教科书中运行以下示例代码,则该页面为空白,并且在控制台中记录了8条错误消息。

<!doctype html>
<html>
  <head>
    <script src="d3.min.js" type="text/JavaScript"></script>
  </head>
  <body>
    <script>
      d3.csv("cities.csv", (error,data) => {
      if (error) {
        console.error(error)
      }
      else {
        dataViz(data)
      }
   });
      function dataViz(incomingData) {

        d3.select("body").selectAll("div.cities")
          .data(incomingData)
          .enter()
          .append("div")
            .attr("class","cities")
            .html(d => d.label);

      }
    </script>
  </body>
</html>

如果我尝试以下操作,我还会收到8条错误消息,这是没有意义的,因为它运行得很好,并且没有在前面添加错误处理。

   d3.csv("cities.csv", (error,data) => {
      if (error) {
        console.error(error)
      }
      else {
        console.log(data)          
   });

我是否缺少服务器设置方面的内容?我只是不确定从哪里开始进行调试,但是我最初能够在控制台中记录数据的事实使我相信服务器至少已正确设置。

0 个答案:

没有答案