Question

我跟踪this example关于绘制多个折线图的情况，并且由于某种原因，它在组织数据时循环遍历我的数据太多次，以至于我有一个线图Y = 0。（当我控制日志群体变量时，数组中有一个太多的对象）。

数据存在于此Google工作表中：https://docs.google.com/spreadsheets/d/1o9HowBfwUmzzVPBB-LGCKxIp-tWVljKsQP7UO59Y-G8/edit?usp=drive_web

有任何解决此问题的建议吗？

<script type = "text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
        <style>

            .axis {
                font: .8em sans-serif;
            }
            .axis path, 
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }

            .x.axis path {
                display: none;
            }

            .redrawable:hover{
                opacity: .5;
            }
            .line {
                fill: none;
                stroke: #000000;
                stroke-width: 2.5px;
            }
            #tooltip {
                position: absolute;
                width: auto;
                height: auto;
                padding: 10px;
                background-color: white;
                border-radius: 10px;
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
                pointer-events: none;
                text-align: center;
                color: #000000;
            }
            #tooltip.hidden {
                display: none;
            }
            #tooltip p {
                margin: 0;
                font-size: 1em;
                line-height: 1em;
            }
            .button {
                background-color: #B5BFBE;
                width: 30%;
                height: auto;
                border-radius: 8px;
                text-align: center;
                display: inline-block;
                padding: 1%;
                margin: .5%;
                color: #ffffff;

            }
            .button:hover {
                opacity: .5;
                cursor: pointer;
            }
            .buttonHolder {
                text-align: center;
                max-width: 700px;
            }
         </style>

        <div id="graph">
            <div id="tooltip" class="hidden">
                <p id="value">value</p>
            </div>

    <script type="text/javascript">
            var w = 700
            h = 500

        var margin = {top: 20, right: 140, bottom: 130, left: 100},
            width = w - margin.left - margin.right,
            height = h - margin.top - margin.bottom;

        var parseDate = d3.time.format("%Y").parse;

        var x = d3.time.scale()
            .range([0, width]);
        var y = d3.scale.linear()
            .range([height, 0]);

        var color = d3.scale.ordinal()
            .range([ "#43736C", "#29403C", "#f4b400", '#000'])
            //"#29403C", "#463573", "#f4b400", "#43736C", "#43736C", "#f4b400"     ]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

        var line = d3.svg.line()
            //.interpolate("basis")
            .x(function(d) {return x(d.year); })
            .y(function(d) {return y(d.arrests); });

        var svg = d3.select("#graph").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
            .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        d3.csv("https://spreadsheets.google.com/tq?key=1o9HowBfwUmzzVPBB-LGCKxIp-tWVljKsQP7UO59Y-G8&tqx=out:csv", function(error, data) {
            if (error) throw error;

            color.domain(d3.keys(data[0]).filter(function(key) {return key !== "year"; }));

            data.forEach(function(d) {
                d.year = parseDate(d.year);
                });

            var populations = color.domain().map(function(name) {
                return {
                    name: name,
                    values: data.map(function(d) {
                        return {year: d.year, arrests: +d[name]};
                        })
                    };
                });
            console.log(populations);

            x.domain(d3.extent(data, function(d) {return d.year; }));

            y.domain([0, 160000]);

            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0,"+ height + ")")
                .call(xAxis);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 0)
                    .attr("dy", "-6em")
                    .style("text-anchor", "end")
                    .text("Number of arrests");

            var pop = svg.selectAll(".pop")
                .data(populations)
                .enter().append("g")
                .attr("class", "pop");

            pop.append("path")
                .attr("class", "line")
                .attr("d", function(d) { return line(d.values); })
                .style("stroke", function(d) {return color(d.name); });

            pop.append("text")
                .datum(function(d) {return {name: d.name, value: d.values[d.values.length - 1]}; })
                .attr("transform", function(d) {return "translate(" + x(d.value.year) + "," + y(d.value.arrests) + ")"; })
                .attr("x", 3)
                .attr("dy", ".35em")
                .text(function(d) {return d.name;});
            });
    </script>

Answer 1

无论出于何种原因，linestretch: 2在加载Google电子表格时添加了一个空字段，创建了一个空对象：

d3.csv

您可以像我一样从{"": ""}或data删除它：

populations

这是小提琴：https://jsfiddle.net/mw9hhbjx/

D3将不需要的额外行添加到我的折线图中

1 个答案: