Alternativas para usar el bucle forEeach () al convertir datos para D3.js

Todavía estoy luchando con este error como se indica en estepublicación anterior en StackOverflow.com. He aislado la causa del problema, que está en mi código D3.js, no puede iterar a través de un 'objeto'. Mi fuente de datos sin procesar es una API web RESTful. Usando jQuery y una función de JavaScript, puedo cargar los valores en una variable llamada 'conjunto de datos'. Cuando envío el contenido del 'conjunto de datos' como una alerta, o lo escribo en un elemento html usando jQuery, todos los datos están allí. Demasiados ejemplos de D3.js usan archivos de datos codificados. Por lo tanto, es importante tener en cuenta que cuando uso una versión codificada de los mismos datos, todo funciona, pero estoy limitado a usar esta variable virtual dinámica de datos.

Cuando ejecuto el código, se bloquea en esta función:

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

El mensaje de error esUncaught TypeError: Cannot read property 'length' of undefined.

Cuando usoconsole.log(typeof(dataset)) justo antes de esta función obtengo 'objeto'. Si hay mentores de D3.js leyendo esto, ¿cuáles son mis opciones para convertir estos datos? He explorado varios sin éxito.

// ============= APENDIDO 01 ========================

Como se ha solicitado aquí, se encuentra el 'conjunto de datos', que se puede ver en el enlace de publicación anterior (Análisis de datos de series temporales con D3.js) encima:

    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}
    ];

// ============= APENDIDO 02 ========================

En referencia a la pregunta de Gerardo, la variable 'conjunto de datos' está 'cargada' (creo) en virtud del código está dentro de una función '$ .get' que ensambla la variable 'conjunto de datos' como se muestra aquí:

    //~ 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
    });

// ============= APÉNDICE 03 ========================

Lo tengo funcionando!

Publicaré el código de trabajo revisado a continuación. Pero para cualquiera que siguiera esta publicación, quería explicar lo que encontré.

Mark sugirió alterar eldataset.push() para descartar todas las citas. Esto me dio objetos en lugar de cadenas. Después de algunos problemas, finalmente se mostró como se esperaba (¡totalmente mentalizado!), Y gracias a Mark, sus sugerencias funcionaron.

Aquí está el código revisado:

    //~ 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;
      };

Respuestas a la pregunta(2)

Su respuesta a la pregunta