Ich habe immer noch Probleme mit diesem Fehler, wie in diesem @ angegebe Früherer Beitrag auf StackOverflow.com. Ich habe die Ursache des Problems isoliert. In meinem D3.js-Code ist es nicht möglich, ein 'Objekt' zu durchlaufen. Meine Rohdatenquelle ist eine RESTful-Web-API. Mit jQuery und einer JavaScript-Funktion kann ich die Werte in eine Variable namens 'dataset' laden. Wenn ich den Inhalt von 'dataset' als Warnung ausgebe oder ihn mit jQuery in ein HTML-Element schreibe, sind alle Daten vorhanden. Viel zu viele D3.js-Beispiele verwenden fest codierte Datendateien. Wenn ich also eine fest codierte Version derselben Daten verwende, funktioniert alles, aber ich kann nur diese dynamische virtuelle Datenvariable verwenden.

Wenn ich den Code starte, stürzt er bei dieser Funktion ab:

    dataset.forEach(function(d) {
        d.theTime = parseDate(d.theTime);
        d.theValue = +d.theValue;
    });

Die Fehlermeldung lautetUncaught TypeError: Cannot read property 'length' of undefined.

Wenn ich benutzeconsole.log(typeof(dataset)) kurz vor dieser Funktion bekomme ich 'Objekt'. Wenn D3.js Mentoren dies lesen, welche Optionen habe ich für die Konvertierung dieser Daten? Ich habe mehrere ohne Erfolg erkundet.

// ============= ANGEHÄNGT 01 ===================

Weil es hier angefordert wurde, ist der 'Datensatz', der unter dem früheren Beitragslink (@) angezeigt werden kanParsing Time Series Data using D3.js) über

    var dataset = [
    {'theTime': '2016/07/12 15:58:40', 'theValue': 1123.07275390625},
    {'theTime': '2016/07/12 16:21:10', 'theValue': 1055.6793212890625},
    {'theTime': '2016/07/12 16:45:40', 'theValue': 962.4850463867188},
    {'theTime': '2016/07/12 17:14:40', 'theValue': 831.2259521484375},
    {'theTime': '2016/07/12 17:55:10', 'theValue': 625.3046875}
    ];

// ============= ANGEHÄNGT 02 ===================

In Bezug auf Gerardos Frage befindet sich die Variable 'dataset' (glaube ich) aufgrund des Codes in einer '$ .get'-Funktion, die die Variable' dataset 'wie hier gezeigt zusammensetzt:

    //~ Populate the 'dataset':
    var dataset = [];
    $.get(url, function(data){
        var itemCount = data.Items.length;
        var commaCount = itemCount - 1;
        for(i=0; i<itemCount; i++){
            if(i == commaCount){
                dataset.push("{'theTime': '" + formattedDateTime(data.Items[i].Timestamp) + "', 'theValue': " + data.Items[i].Value + "}");
            }
            else {
                dataset.push("{'theTime': '" + formattedDateTime(data.Items[i].Timestamp) + "', 'theValue': " + data.Items[i].Value + "},");
            }
        }
    //~ ALL THE D3 CODE IS INSIDE THIS '$.get' FUNCTION
    });

// ============= ANGEHÄNGT 03 ===================

Ich habe es funktioniert!

Ich werde den überarbeiteten Arbeitscode unten posten. Aber für jeden, der diesen Beitrag verfolgt, wollte ich erklären, was ich gefunden habe.

Mark schlug vor, das @ zu ändedataset.push(), um alle Anführungszeichen zu löschen. Dies gab mir Objekte anstelle von Zeichenfolgen. Nach einiger Fehlerbehebung wurde es endlich wie erwartet angezeigt (total aufgeregt!), Und danke Mark, Ihre Vorschläge haben es geschafft.

Hier ist der überarbeitete Code:

    //~ Populate the 'dataset':
    var dataset = [];
    $.get(url, function(data){
        var itemCount = data.Items.length;
        var commaCount = itemCount - 1;
        for(i=0; i<itemCount; i++){
            dataset.push({theTime: formattedDateTime(data.Items[i].Timestamp), theValue: data.Items[i].Value});
        }

        var margin = {top: 20, right: 20, bottom: 30, left: 50};
        var width = 960 - margin.left - margin.right;
        var height = 500 - margin.top - margin.bottom;
        var parseDate = d3.time.format("%Y/%m/%d %H:%M:%S").parse;

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

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

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

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

        var line = d3.svg.line()
          .x(function(d) { return x(d.theTime); })
          .y(function(d) { return y(d.theValue); });


        var svg = d3.select("#myChart").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 + ")");

        dataset.forEach(function(d) {
            d.theTime = parseDate(d.theTime);
            d.theValue = parseFloat(d.theValue);
        });

         x.domain(d3.extent(dataset, function(d) { return d.theTime; }));
         y.domain(d3.extent(dataset, function(d) { return d.theValue;}));

         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", 6)
                 .attr("dy", ".71em")
                 .style("text-anchor", "end")
                 .text("M³/hr");

         svg.append("path")
                 .datum(dataset)
                 .attr("class", "line")
                 .attr("d", line);
    });

      //~~~ Format The Date:
      function formattedDateTime(dateAndTime) {
            var d = new Date(dateAndTime);
            var numDate = d.getDate();
            var numMonth = d.getMonth() + 1;
            var numYear = d.getFullYear();
            var numHours = d.getHours();
            var numMinutes = d.getMinutes();
            var numSeconds = d.getSeconds();
            numDate = (numDate < 10) ? "0" + numDate : numDate;
            numMonth = (numMonth < 10) ? "0" + numMonth : numMonth;
            numHours = (numHours < 10) ? "0" + numHours : numHours;
            numMinutes = (numMinutes < 10) ? "0" + numMinutes : numMinutes;
            numSeconds = (numSeconds < 10) ? "0" + numSeconds : numSeconds;

            return numYear + "/" + numMonth + "/" + numDate + " " + numHours + ":" + numMinutes + ":" + numSeconds;
      };