Question

我试图运行一个基于json文件显示图形的程序。但图表很奇怪，我不知道为什么。任何想法如何解决它？感谢

这是我的代码：

var svg = d3.select("svg"),
                margin = {
                    top: 20,
                    right: 20,
                    bottom: 30,
                    left: 60
                },
                width = +svg.attr("width") - margin.left - margin.right,
                height = +svg.attr("height") - margin.top - margin.bottom,
                g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            var parseDate = d3.timeParse("%Y%m%d"),
                formatDate = d3.timeFormat("%Y");

            var x = d3.scaleTime()
                .domain([new Date(2016, 0, 1), new Date(2018, 0, 0)])
                .range([0, width]);

            var y = d3.scaleLinear()
                .range([height, 0]);

            var xAxis = d3.axisBottom(x);

            var yAxis = d3.axisLeft(y);

            var area = d3.area()
                .curve(d3.curveStepAfter)
                .x(function(d) {
                    return x(d.Date_Id);
                })
                .y0(y(0))
                .y1(function(d) {
                    return y(d.NbCopie);
                });

            var colors = d3.scaleLinear()
                .domain([0, width])
                .range(['#0080FF', '#FF3333'])

            var areaPath = g.append("path")
                .attr("clip-path", "url(#clip)")
                .attr("fill", function(d, i) {
                    return colors(i);
                })

            var yGroup = g.append("g");

            var xGroup = g.append("g")
                .attr("transform", "translate(0," + height + ")");

            var zoom = d3.zoom()
                .scaleExtent([1 / 4, 8])
                .translateExtent([
                    [-width, -Infinity],
                    [2 * width, Infinity]
                ])
                .on("zoom", zoomed);

            var zoomRect = svg.append("rect")
                .attr("width", width)
                .attr("height", height)
                .attr("fill", "none")
                .attr("pointer-events", "all")
                .call(zoom);

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

            // FICHIER JSON ///////////////////////////////////////
            d3.json("data.json", function(error, data) {
                data.forEach(function(d) {
                    d.Date_Id = parseDate(d.Date_Id);
                    d.NbCopie = +d.NbCopie;
                })

                var xExtent = d3.extent(data, function(d) {
                    return d.Date_Id;
                })

                zoom.translateExtent([
                    [x(xExtent[0]), -Infinity],
                    [x(xExtent[1]), Infinity]
                ])
                y.domain([0, d3.max(data, function(d) {
                    return d.NbCopie;
                })]);
                yGroup.call(yAxis).select(".domain").remove();
                areaPath.datum(data);
                zoomRect.call(zoom.transform, d3.zoomIdentity);
            });

            function zoomed() {
                var xz = d3.event.transform.rescaleX(x);
                xGroup.call(xAxis.scale(xz));
                areaPath.attr("d", area.x(function(d) {
                    return xz(d.Date_Id);
                }));
            }

JSON文件：

[{
    "ConsoPhot_Id": "10148",
    "idLotImport": 390,
    "Date_Id": 20170201,
    "Orga_Id": "203938",
    "NbTache": 153,
    "NbCopie": 798,
    "NbCopieBW": 488,
    "NbCopieCouleur": 310,
    "MtTotal": 13.69
},
{
    "ConsoPhot_Id": "10602",
    "idLotImport": 391,
    "Date_Id": 20161201,
    "Orga_Id": "203938",
    "NbTache": 153,
    "NbCopie": 909,
    "NbCopieBW": 779,
    "NbCopieCouleur": 130,
    "MtTotal": 7.93
},
{
    "ConsoPhot_Id": "10905",
    "idLotImport": 392,
    "Date_Id": 20161101,
    "Orga_Id": "203938",
    "NbTache": 115,
    "NbCopie": 515,
    "NbCopieBW": 409,
    "NbCopieCouleur": 106,
    "MtTotal": 5.6
},
{
    "ConsoPhot_Id": "11162",
    "idLotImport": 393,
    "Date_Id": 20161001,
    "Orga_Id": "203938",
    "NbTache": 233,
    "NbCopie": 1173,
    "NbCopieBW": 725,
    "NbCopieCouleur": 448,
    "MtTotal": 19.86
},
{
    "ConsoPhot_Id": "11745",
    "idLotImport": 394,
    "Date_Id": 20170101,
    "Orga_Id": "203938",
    "NbTache": 173,
    "NbCopie": 889,
    "NbCopieBW": 782,
    "NbCopieCouleur": 107,
    "MtTotal": 7.07
},
{
    "ConsoPhot_Id": "12144",
    "idLotImport": 435,
    "Date_Id": 20170301,
    "Orga_Id": "203938",
    "NbTache": 131,
    "NbCopie": 590,
    "NbCopieBW": 454,
    "NbCopieCouleur": 136,
    "MtTotal": 6.92
}
]

这是奇怪的图：

Answer 1

您必须按时间顺序对数据数组进行排序：

mapStateT

这是一个工作的掠夺者：http://plnkr.co/edit/vBMAPKOmNgoXR9kUCDab?p=preview

d3.js奇怪的图形显示

1 个答案: