D3.js - 来自CSV的数据不显示，静态数据将

时间：2013-10-05 22:22:46

标签： javascript csv svg d3.js

当我使用静态数据（第一个数据集变量，在注释中标识为ATTEMPT＃1）时，条形图将在页面上正确显示。但是，当我从CSV文件读取数据（注释掉第一个数据集变量并删除后面注释掉的代码）时，页面上不会显示任何内容。而且我在控制台中没有任何错误。

以下是控制台中ATTEMPT＃1的检查，因此您可以看到两个数据集变量具有相似的格式：

$ dataset.length;
51
$ dataset[0];
[5, "WA"]

这是在控制台中对ATTEMPT＃2的检查：

$ dataset.length;
50
$ dataset[0];
[35.6, "Alabama"]

以下是 /index.html 文件：

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

            rect:hover {
                fill: orange;
            }

            #tooltip {
                position: absolute;
                width: 200px;
                height: auto;
                padding: 10px;
                background-color: white;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                pointer-events: none;
            }

            #tooltip.hidden {
                display: none;
            }

            #tooltip p {
                margin: 0;
                font-family: sans-serif;
                font-size: 16px;
                line-height: 20px;
            }

        </style>
    </head>
    <body>
        <div id="tooltip" class="hidden">
            <p><strong id="tool_header">State</strong>&nbsp;State</p>
            <p><span id="value">100</span>&nbsp;Per Inc Per Capita (000)</p>
        </div>
        <script type="text/javascript">

            //Width and height
            var w = 600;
            var h = 250;

            // ATTEMPT #1 - Displays correctly
            var dataset = [ [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"]];

            /* ATTEMPT #2 - Won't display anything
            var dataset = [];

            // Save state info object into dataset array
            d3.csv("2012_PersonalIncomePerCapitaByState.csv", function(d) {

                // Store state and income (in 1,000's)
                for (var i = 0; i < d.length; i++) {
                    dataset.push([Math.round( parseInt( d[i].Income ) / 100 ) / 10, d[i].State]);
                }
            });
            */

            var xScale = d3.scale.ordinal()
                            .domain(d3.range(dataset.length))
                            .rangeRoundBands([0, w], 0.05);

            var yScale = d3.scale.linear()
                            .domain([d3.min(dataset, function(d) { return d[0]; }) / 1.2, d3.max(dataset, function(d) { return d[0]; }) * 1.05])
                            .range([0, h]);

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

            //Create bars
            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return xScale(i);
               })
               .attr("y", function(d) {
                    return h - yScale(d[0]);
               })
               .attr("width", xScale.rangeBand())
               .attr("height", function(d) {
                    return yScale(d[0]);
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, " + (d[0] * 10) + ")";
               })
               .on("mouseover", function(d) {

                    //Get this bar's x/y values, then augment for the tooltip
                    var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
                    var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;

                    //Update the tooltip position and value
                    d3.select("#tooltip")
                        .style("left", xPosition + "px")
                        .style("top", yPosition + "px")                     
                        .select("#value")
                        .text(d[0]);

                    d3.select("#tooltip")
                        .select("#tool_header")
                        .text(d[1]);

                    //Show the tooltip
                    d3.select("#tooltip").classed("hidden", false);

               })
               .on("mouseout", function() {

                    //Hide the tooltip
                    d3.select("#tooltip").classed("hidden", true);

               })
               .on("click", function() {
                    sortBars();
               });

            //Define sort order flag
            var sortOrder = false;

            //Define sort function
            var sortBars = function() {

                //Flip value of sortOrder
                sortOrder = !sortOrder;

                svg.selectAll("rect")
                   .sort(function(a, b) {
                        if (sortOrder) {
                            return d3.ascending(a, b);
                        } else {
                            return d3.descending(a, b);
                        }
                    })
                   .transition()
                   .delay(function(d, i) {
                       return i * 50;
                   })
                   .duration(1000)
                   .attr("x", function(d, i) {
                        return xScale(i);
                   });

            };          

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

这是 2012_PersonalIncomePerCapitaByState.csv 文件：

State,Income
Alabama,35625
Alaska,46778
Arizona,35979
Arkansas,34723
California,44980
Colorado,45135
Connecticut,58908
Delaware,41940
Florida,40344
Georgia,36869
Hawaii,44024
Idaho,33749
Illinois,44815
Indiana,36902
Iowa,42126
Kansas,41835
Kentucky,35041
Louisiana,39413
Maine,39481
Maryland,51971
Massachusetts,54687
Michigan,37497
Minnesota,46227
Mississippi,33073
Missouri,39049
Montana,37370
Nebraska,43143
Nevada,37361
New Hampshire,47058
New Jersey,53628
New Mexico,35079
New York,52095
North Carolina,37049
North Dakota,51893
Ohio,39289
Oklahoma,39006
Oregon,38786
Pennsylvania,43616
Rhode Island,44990
South Carolina,34266
South Dakota,43659
Tennessee,37678
Texas,41471
Utah,34601
Vermont,42994
Virginia,47082
Washington,45413
West Virginia,34477
Wisconsin,40537
Wyoming,48670

您能否帮我弄清楚为什么我无法从CSV文件中显示这些值？提前致谢！

1 个答案:

答案 0 :(得分：0)

回答我自己的问题（根据Lars Kotthoff的建议）：将所有代码移到d3.csv（）函数的回调中。

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

            rect:hover {
                fill: orange;
            }

            #tooltip {
                position: absolute;
                width: 200px;
                height: auto;
                padding: 10px;
                background-color: white;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                pointer-events: none;
            }

            #tooltip.hidden {
                display: none;
            }

            #tooltip p {
                margin: 0;
                font-family: sans-serif;
                font-size: 16px;
                line-height: 20px;
            }

        </style>
    </head>
    <body>
        <div id="tooltip" class="hidden">
            <p><strong id="tool_header">State</strong>&nbsp;State</p>
            <p><span id="value">100</span>&nbsp;Per Inc Per Capita (000)</p>
        </div>
        <script type="text/javascript">

            //Width and height
            var w = 600;
            var h = 250;

            // ATTEMPT #1 - Displays correctly
            //var dataset = [ [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"]];


            //ATTEMPT #2 - Won't display anything
            var dataset = [];

            // Save state info object into dataset array
            d3.csv("2012_PersonalIncomePerCapitaByState.csv", function(d) {

                // Store state and income (in 1,000's)
                for (var i = 0; i < d.length; i++) {
                    dataset.push([Math.round( parseInt( d[i].Income ) / 100 ) / 10, d[i].State]);
                }


                var xScale = d3.scale.ordinal()
                                .domain(d3.range(dataset.length))
                                .rangeRoundBands([0, w], 0.05);

                var yScale = d3.scale.linear()
                                .domain([d3.min(dataset, function(d) { return d[0]; }) / 1.2, d3.max(dataset, function(d) { return d[0]; }) * 1.05])
                                .range([0, h]);

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

                //Create bars
                svg.selectAll("rect")
                   .data(dataset)
                   .enter()
                   .append("rect")
                   .attr("x", function(d, i) {
                        return xScale(i);
                   })
                   .attr("y", function(d) {
                        return h - yScale(d[0]);
                   })
                   .attr("width", xScale.rangeBand())
                   .attr("height", function(d) {
                        return yScale(d[0]);
                   })
                   .attr("fill", function(d) {
                        return "rgb(0, 0, " + (d[0] * 10) + ")";
                   })
                   .on("mouseover", function(d) {

                        //Get this bar's x/y values, then augment for the tooltip
                        var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
                        var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;

                        //Update the tooltip position and value
                        d3.select("#tooltip")
                            .style("left", xPosition + "px")
                            .style("top", yPosition + "px")                     
                            .select("#value")
                            .text(d[0]);

                        d3.select("#tooltip")
                            .select("#tool_header")
                            .text(d[1]);

                        //Show the tooltip
                        d3.select("#tooltip").classed("hidden", false);

                   })
                   .on("mouseout", function() {

                        //Hide the tooltip
                        d3.select("#tooltip").classed("hidden", true);

                   })
                   .on("click", function() {
                        sortBars();
                   });

                //Define sort order flag
                var sortOrder = false;

                //Define sort function
                var sortBars = function() {

                    //Flip value of sortOrder
                    sortOrder = !sortOrder;

                    svg.selectAll("rect")
                       .sort(function(a, b) {
                            if (sortOrder) {
                                return d3.ascending(a, b);
                            } else {
                                return d3.descending(a, b);
                            }
                        })
                       .transition()
                       .delay(function(d, i) {
                           return i * 50;
                       })
                       .duration(1000)
                       .attr("x", function(d, i) {
                            return xScale(i);
                       });

                };


            });


        </script>
    </body>
</html>
相关问题
最新问题