Q: D3 V3 Multi-line Chart - Issues appending lines to svg I'm having issues getting D3v4 to show lines on a chart. I might be getting v3/v4 syntax confused.
I have the data nested as there are 5 lines.

            // Chart Canvas Dimentions
            var margin = {top: 20, right: 80, bottom: 30, left: 50};
            var width = 900;
            var height = 600;

            // Time Parse
            var parseTime = d3.time.format("%Y-%m-%d %H:%M:%S");

            // Chart Axis Sizes
            yAxisMax = Math.max.apply(Math, data.map(function(o){return o.value;})) * 1.1;
            yAxisMin = Math.min.apply(Math, data.map(function(o){return o.value;})) - (this.yAxisMax * 0.1);
            xAxisMax = width * 0.99;

            console.log('yAxisMax: '+yAxisMax);
            console.log('yAxisMin: '+yAxisMin);
            console.log('xAxisMax: '+xAxisMax);



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

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

            var color = d3.scale.category10();

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

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



            chartLine = d3.svg.line()
                .x(function(d){ return x(parseTime(d.date)) })
                .y(function(d){ return y(d.value) })
                .interpolate("basis");




            // Nest Entries by Name (Groups the Lines by Names - Seperate Entities)
            var nestedData = d3.nest()
                .key(function(d) { return d.name; })
                .entries(data);

            // D3 Chart - This is the Context to Work With
            var context = d3.select("#chartContainer").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .attr("id", "D3lineChart")
                .attr("class", "D3EventScopeContainer")
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            // Interactive HoverLine
            var hoverLine = context
                .append('g')
                .attr('class', 'hoverLineGroup')
                .append("line")
                .attr('transform', 'translate(70,0)')
                .attr('class', 'interactiveHoverLine hidden')
                .attr("x1", 0).attr("x2", 0)
                .attr("y1", 0).attr("y2", height);



            // Loop through data
            nestedData.forEach(function(d,i) {
                console.dir(d)
                console.dir(d.values)


                // Add Line
                context
                    .append('g')
                    .attr('class', 'lineGroup')
                    .append('path')
                    .attr('transform', 'translate(70,0)')
                    .attr('class', 'chartLinesGroup tag'+ d.key.replace(/\s+/g, '').replace('.', '').replace('-', '').toLowerCase())
                    .style("stroke", function() { return d.color = color(d.key); })                   // Add the colours dynamically
                    .style("stroke-opacity", 1)
                    //.attr('d', chartLine(d.values))

                    .on("mouseover", function() {
                        d3.select(this)
                            .style("stroke-width", 7.5)
                    })
                    .on("mouseout", function() {
                        d3.select(this)
                            .style("stroke-width", 2.5)
                    });







            });

It fails when I enable the line
.attr('d', chartLine(d.values))

This function must not be formated correctly to use the data.
The error I get is - related to date processing:

Any advice would be greatly appreciated.
I'm essentially trying to get the the lines to show on the chart.
thanks
*** I get around the error message by adding .parse to the end of the time format line:
    // Time Parse
    var parseTime = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

Still nothing showing on the screen - div/svg has height/width set...
hummmmm

A: You need to read API;) But at first u must try :
var x = d3.scaleTime()
            .range([0, width]);

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

        var color = d3.scaleOrdinal(d3.schemeCategory10);

        var xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%H:%M:%S.%L"));

        var yAxis = d3.axisLeft(y);

parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S.%L");
chartLine = d3.line()
            .curve(d3.curveMonotoneX)
            .x(function(d){ return x(parseTime(d.date)) })
            .y(function(d){ return y(d.value) });

Hope its help
