Question

我是D3.js的新手，所以如果我忽略了明显的内容，我会事先道歉，但是我一生都无法弄清楚什么在这里不起作用...

我一直在通过Scott Murray的用于Web的交互式数据可视化进行操作，在第7章中遇到了一个障碍。我的目标是从csv文档中加载一些简单的数据，将第一列解析为日期数据，然后显示。 CSV的头看起来像这样...

Date, Amount
9/15/17, 26
11/9/17, 31
11/30/17, 23
12/21/17, 26
2/7/18, 23

我运行下面的代码（直接来自书！），...似乎什么都没有发生。当我在控制台中输入“数据集”时，它似乎仅包括最后一行：

{Date: "01/31/17", Amount: "23"}
Amount: "23"
Date: "01/31/17"

我很困惑，因为代码本身又来自这本书。到目前为止，我一直在研究前几章。是的，我正在运行本地服务器。知道我在做什么错吗？非常感谢！

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Time scale</title>
        <script type="text/javascript" src="../d3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

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

            var dataset, xScale, yScale; 

            //For converting strings to Dates
            var parseTime = d3.timeParse("%m/%d/%y");

            //Function for converting CSV values from strings to Dates and numbers
            var rowConverter = function(d) {
                return {
                    Date: parseTime(d.Date),
                    Amount: parseInt(d.Amount)
                };
            }

            //Load in the data
            d3.csv("time_scale_data.csv", rowConverter, function(data) {

                //Copy data into global dataset
                dataset = data;

                //Create scale functions
                xScale = d3.scaleTime()
                               .domain([
                                    d3.min(dataset, function(d) { return d.Date; }),
                                    d3.max(dataset, function(d) { return d.Date; })
                                ])
                               .range([padding, w - padding]);

                yScale = d3.scaleLinear()
                               .domain([
                                    d3.min(dataset, function(d) { return d.Amount; }),
                                    d3.max(dataset, function(d) { return d.Amount; })
                                ])
                               .range([h - padding, padding]);

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

                //Generate date labels first, so they are in back
                svg.selectAll("text")
                   .data(dataset)
                   .enter()
                   .append("text")
                   .text(function(d) {
                        return formatTime(d.Date);
                   })
                   .attr("x", function(d) {
                        return xScale(d.Date) + 4;
                   })
                   .attr("y", function(d) {
                        return yScale(d.Amount) + 4;
                   })
                   .attr("font-family", "sans-serif")
                   .attr("font-size", "11px")
                   .attr("fill", "#bbb");

                //Generate circles last, so they appear in front
                svg.selectAll("circle")
                   .data(dataset)
                   .enter()
                   .append("circle")
                   .attr("cx", function(d) {
                        return xScale(d.Date);
                   })
                   .attr("cy", function(d) {
                        return yScale(d.Amount);
                   })
                   .attr("r", 2);

            });

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

Answer 1

代替：

sendall

尝试一下：

send

无法在D3中加载CSV数据

1 个答案: