Question

我想在attached picture上重现图表。我的代码基于互联网上的2个教程。以下是我的代码。当我运行它时，我只得到一个空白页面，其中包含以下错误消息：

SyntaxError：missing）在参数列表之后，第49行更新已修复。请参阅下面的新代码

这也是我的.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>

Answer 1

看起来你至少在某个时候错过了一个右括号和分号：

// 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;
    });
});

查看上面的最后一行，并将其与您的代码示例进行比较。

D3：JavaScript：语法错误和空白页面

1 个答案: