D3：JavaScript：語法錯誤和空白頁

-1

我想重現attached picture上的圖形。我基於我的代碼在互聯網上找到的2個教程。以下是我的代碼。當我運行它，我只是得到了一個空白頁面，出現以下錯誤信息：D3：JavaScript：語法錯誤和空白頁

SyntaxError: missing) after argument list, line 49 Update fixed. See new code below

而且這是我的.csv文件內容是什麼樣子：

course_id,userid_DI,registered,viewed,explored,certified,final_cc_cname_DI,LoE_DI,YoB,gender,grade,start_time_DI,last_event_DI,nevents,ndays_act,nplay_video,nchapters,nforum_posts,roles,incomplete_flag 
LavalX/CB22x/2013_Spring,MHxPC130442623,1,0,0,0,United States,NA,NA,NA,0,2012-12-19,2013-11-17,,9,,,0,,1 
LavalX/CS50x/2012,MHxPC130442623,1,1,0,0,United States,NA,NA,NA,0,2012-10-15,,,9,,1.0,0,,1 
LavalX/CB22x/2013_Spring,MHxPC130275857,1,0,0,0,Canada,NA,NA,NA,0,2013-02-08,2013-11-17,,16,,,0,,1 
LavalX/CS50x/2012,MHxPC130275857,1,0,0,0,United States,NA,NA,NA,0,2012-09-17,,,16,,,0,,1 
LavalX/ER22x/2013_Spring,MHxPC130275857,1,0,0,0,France,NA,NA,NA,0,2012-12-19,,,16,,,0,,1

任何人都可以幫助嗎？謝謝。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Graphs</title> 
     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
     <style type="text/css"> 

      .axis path, 
      .axis line { 
       fill: none; 
       stroke: black; 
       shape-rendering: crispEdges; 
      } 

      .axis text { 
       font-family: sans-serif; 
       font-size: 11px; 
      } 

     </style> 
    </head> 
    <body> 
     <script type="text/javascript"> 

      //Width and height 
      var w = 500; 
      var h = 300; 
      var padding = 30; 

      // Get the data 
      d3.csv("HMXPC13_DI_v2_5-14-14_court.csv", function(error, dataset) { 
       data.forEach(function(d) { 
         d.registered = +d.registered; 
         d.start_time_DI = +d.start_time_DI; 
       }); 
      } 

      //Create scale functions 
      var xScale = d3.scale.linear() 
           .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 
           .range([padding, w - padding * 2]); 

      var yScale = d3.scale.linear() 
           .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
           .range([h - padding, padding]); 

      var rScale = d3.scale.linear() 
           .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
           .range([2, 5]); 

      //Define X axis 
      var xAxis = d3.svg.axis() 
           .scale(xScale) 
           .orient("bottom") 
           .ticks(5); 

      //Define Y axis 
      var yAxis = d3.svg.axis() 
           .scale(yScale) 
           .orient("left") 
           .ticks(5); 

      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      //Create circles 
      svg.selectAll("circle") 
       .data(dataset) 
       .enter() 
       .append("circle") 
       .attr("cx", function(d) { 
        return xScale(d[0]); 
       }) 
       .attr("cy", function(d) { 
        return yScale(d[1]); 
       }) 
       .attr("r", function(d) { 
        return rScale(d[1]); 
       }); 

      //Create X axis 
      svg.append("g") 
       .attr("class", "axis") 
       .attr("transform", "translate(0," + (h - padding) + ")") 
       .call(xAxis); 

      //Create Y axis 
      svg.append("g") 
       .attr("class", "axis") 
       .attr("transform", "translate(" + padding + ",0)") 
       .call(yAxis); 

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

更新：這是新的代碼

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Graphs</title> 
     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
     <style type="text/css"> 

      .axis path, 
      .axis line { 
       fill: none; 
       stroke: black; 
       shape-rendering: crispEdges; 
      } 

      .axis text { 
       font-family: sans-serif; 
       font-size: 11px; 
      } 

     </style> 
    </head> 
    <body> 
     <script type="text/javascript"> 

      //Width and height 
      var w = 1000; 
      var h = 600; 
      var padding = 30; 

      // Get the data 
      d3.csv("HMXPC13_DI_v2_5-14-14_court.csv", function(error, dataset) { 
       dataset.forEach(function(d) { 
         d.registered = +d.registered; 
         d.start_time_DI = +d.start_time_DI; 

      }); 

      //Create scale functions 
      var xScale = d3.scale.linear() 
           .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 
           .range([padding, w - padding * 2]); 

      var yScale = d3.scale.linear() 
           .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
           .range([h - padding, padding]); 

      var rScale = d3.scale.linear() 
           .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
           .range([2, 5]); 

      //Define X axis 
      var xAxis = d3.svg.axis() 
           .scale(xScale) 
           .orient("bottom") 
           .ticks(5); 

      //Define Y axis 
      var yAxis = d3.svg.axis() 
           .scale(yScale) 
           .orient("left") 
           .ticks(5); 

      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      //Create X axis 
      svg.append("g") 
       .attr("class", "axis") 
       .attr("transform", "translate(0," + (h - padding) + ")") 
       .call(xAxis); 

      //Create Y axis 
      svg.append("g") 
       .attr("class", "axis") 
       .attr("transform", "translate(" + padding + ",0)") 
       .call(yAxis); 
}); 
     </script> 
    </body> 
</html>

來源

2015-09-02 user5293879

那麼......第49行是什麼？現在你知道你錯過了'）'，你能找到它嗎？您是否使用JS代碼的IDE？如果沒有，請考慮獲得一個。另一種方法是將代碼粘貼到像[jshint.com]（http://www.jshint.com）這樣的網站中，並讓它幫助您找到類似的錯誤。 – JeffC

謝謝白眉。現在我沒有錯誤，但沒有顯示圖表。我只在屏幕上顯示軸。請問我錯過了什麼？ – user5293879

你目前是否收到任何錯誤訊息？ – NightShadeQueen

您似乎在某個時候缺少一個右括號和分號至少：

// Get the data 
d3.csv("HMXPC13_DI_v2_5-14-14_court.csv", function(error, dataset) { 
    data.forEach(function(d) { 
     d.registered = +d.registered; 
     d.start_time_DI = +d.start_time_DI; 
    }); 
});

退房上面的最後一行並將其與您的代碼示例進行比較。

來源

2015-09-02 18:58:48 whitebrow

D3：JavaScript：語法錯誤和空白頁

回答

相關問題