Question

我正在尝试使用D3生成此图表，但我的y轴无法正确显示，并且数据在2014年10月之前也无法正确显示。My current chart Looks Like this。我在http://bl.ocks.org/mbostock/1667367

使用示例

这是我的代码

                    var margin = {
                        top : 10,
                        right : 10,
                        bottom : 100,
                        left : 40
                    }, margin2 = {
                        top : 430,
                        right : 10,
                        bottom : 20,
                        left : 40
                    }, 

                    width = 1006 - margin.left - margin.right,
                    height = 500 - margin.top - margin.bottom,
                    height2 = 500 - margin2.top - margin2.bottom;

                    var parseDate = d3.time.format("%Y-%m-%d").parse; //Date should be stored in the csv file in the order yyyy-mm-dd
                    var x = d3.time.scale().range([ 0, width ]), x2 = d3.time
                            .scale().range([ 0, width ]), y = d3.scale
                            .linear().range([ height, 0 ]), y2 = d3.scale
                            .linear().range([ height2, 0 ]);

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

                    var brush = d3.svg.brush().x(x2).on("brush", brushed);

                    var area = d3.svg.area().interpolate("monotone").x(
                            function(d) {
                                return x(d.Date);
                            }).y0(height).y1(function(d) {
                        return y(d.FileStored);
                    });

                    var area2 = d3.svg.area().x(function(d) {
                        return x2(d.Date);
                    }).y0(height2).y1(function(d) {
                        return y2(d.FileStored);
                    });

                    var svg = d3.select("div#map").append("svg").attr("width",
                            width + margin.left + margin.right).attr(
                            "height", height + margin.top + margin.bottom);

                    svg.append("defs").append("clipPath")
                            .attr("id", "clip").append("rect").attr(
                                    "width", width).attr("height", height);

                    var focus = svg.append("g").attr("class", "focus")
                            .attr(
                                    "transform",
                                    "translate(" + margin.left + ","
                                            + margin.top + ")");

                    var context = svg.append("g").attr("class", "context")
                            .attr(
                                    "transform",
                                    "translate(" + margin2.left + ","
                                            + margin2.top + ")");

                    d3.csv("FilesRequestedPerMonth.csv", type, function(error,
                            data) {
                        x.domain(d3.extent(data.map(function(d) {
                            return d.Date;
                        })));
                        y.domain([ 0, d3.max(data.map(function(d) {
                            return d.FileStored;
                        })) ]);
                        x2.domain(x.domain());
                        y2.domain(y.domain());

                        focus.append("path").datum(data).attr("class",
                                "area").attr("d", area);

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

                        focus.append("g").attr("class", "y axis").call(
                                yAxis);

                        context.append("path").datum(data).attr("class",
                                "area").attr("d", area2);

                        context.append("g").attr("class", "x axis")
                                .attr("transform",
                                        "translate(0," + height2 + ")")
                                .call(xAxis2);

                        context.append("g").attr("class", "x brush").call(
                                brush).selectAll("rect").attr("y", -6)
                                .attr("height", height2 + 7);
                    });

                    function brushed() {
                        x.domain(brush.empty() ? x2.domain() : brush
                                .extent());
                        focus.select(".area").attr("d", area);
                        focus.select(".x.axis").call(xAxis);
                    }

                    function type(d) {
                        d.Date = parseDate(d.Date);
                        d.FileStored = +d.FileStored;
                        return d;
                    }

我的示例数据是

  Date,FileStored
1996-01-01,31000
1996-02-01,40000
1996-03-01,46000
1996-04-01,71000
1996-05-01,67000
1996-06-01,45000
1996-07-01,51000
1996-08-01,49000
1996-09-01,59000
1996-10-01,71000
1996-11-01,62000
1996-12-01,61000
1997-01-01,70000
1997-02-01,77000
1997-03-01,77000
1997-04-01,96000
1997-05-01,70000
1997-06-01,74000
1997-07-01,64000
1997-08-01,59601
1997-09-01,63234
1997-10-01,69228
1997-11-01,75437
1997-12-01,77465
1998-01-01,74204
1998-02-01,65241
1998-03-01,72996
1998-04-01,70331
1998-05-01,77535

Answer 1

仅在输入数据不正确时才会出现此问题。我在这里提供的数据不正确：http://plnkr.co/edit/WQJZVGxgPvW0gx60yB4O?p=preview。

1998-05-01,77535, 
1998-05-01,
1998-05-01,
1998-05-01,
1998-05-01

您实际上不需要对代码进行任何更改。只需提供正确的数据，这个问题就应该自动解决。

D3中的Y轴标记和数据可视化

1 个答案: