d3 get data from local array

[tomBeach]

We found some d3 code for building a line graph that reads data from a tsv file. Our data is in an array (parsed from API return). We don't know how extract data from the array (rather than tsv file) and we are not understanding the d3.select statement that kicks off making the svg element. (Our svg has no value).

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

            closeValuesArray.forEach(function(d) {
                console.log("closeValuesArray.forEach");
                d.date = parseDate(d.date);
                d.close = +d.close;
                console.log("d.date: " + d.date);

[jshawl]

what is the output of console.log("d.date: " + d.date);?

[tomBeach]

Never gets to that point (no output). closeValuesArray.forEach is the last thing on console...

[jshawl]

what is the output of console.log(closeValuesArray)?

[tomBeach]

closeValuesArray is an array of arrays (paired values [date, value]).

[jshawl]

What if you try:

svg.data(closeValueArray).enter().data(function(d){
  console.log(d)
})

[tomBeach]

I should have sent you more of this code fragment. The console.log("svg: " + svg); line shows no value for svg. (We see only the "svg" text.) Seems like we aren't creating the svg element, so anything following will fail.

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

            console.log("svg: " + svg);

[tomBeach]

One issue solved: svg now outputs [object SVGGElement]. Nothing beyond that though.

[jshawl]

heck yes! progress! You need to call .data() to get the data in there and .enter() to make room for the new elements

[RobertAKARobin]

I'm going to close this. Feel free to open a new issue linking to this one!