D3 V4 - Trying to Chart a Simple line Graph

Question

I'm struggling to plot a simple line chart in D3 (V4)...

My Data looks as follows and I believe its fine as I can use d3.timeParse() to parse the dates and they console.log fine:

var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");

Data Format

            $myObj = (object)[];
            $myObj->name = $row['CH_FREQ'];
            $myObj->value = $row['RX_POWER'];
            $myObj->date = $row['CREATED_AT'];
            $chartData_RX_Down[] = $myObj;

eg: date, name, value - which could be: 2017-03-22 12:20:02, name, -0.2

Most of the Dates are negatives.

Chart Code:

    // SA MAC Plot Chart - API Doco: http://devdocs.io/d3~4/
    function plotChart(data) {
        $('#chartContainer').empty();

        // Color Scale
        var magma = d3.scaleSequential(d3.interpolateMagma).domain([0,7]);


        // Set the Dimensions and Margins of the Graph
        var margin = {top: 20, right: 20, bottom: 40, left: 60},
            width = 580,
            height = 230;


        // x-Scale with Time Width
        var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");      // D3 Expected Date Format
        var x = d3.scaleTime()
            .domain(d3.extent(data, function(d) { return parseDate(d.date); }))
            .range([0, width]);


        // y-Scale
        var y = d3.scaleLinear()
            .domain([0, d3.max(data, function(d) { return d.value; })])
            .range([height, 0]);



        // append the svg object to the body of the page
        // append a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("#chartContainer").append("svg")
            .attr("width", "100%")
            .attr("height", "300px")
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");




       // append the rectangles for the bar chart
        svg.selectAll("path")
            .data(data)
            .enter().append("path")
            .attr("x", function(d) { return d.date; })
            .attr("y", function(d) { return d.value; });



        // X-Axis
        svg.append("g")
            .attr("class", "axis_x")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x).tickPadding(5).tickSize(10));


        // Y-Axis
        svg.append("g")
            .attr("class", "axis_y")
            .call(d3.axisLeft(y).ticks(5).tickPadding(5).tickSize(10));


        // X-Axis Text
        svg.append("text")
            .attr("class", "d3_X_Axis_Text")
            .attr("x", 0)
            .attr("y", 0)
            .attr("fill", "white")
            .attr("transform", "translate(" + (width/2) + " ," + (height + margin.top + 20) + ")")
            .style("text-anchor", "middle")
            .text("Date Time");


        // Y-Axis Text
        svg.append("text")
            .attr("class", "d3_Y_Axis_Text")
            .attr("x", -130)
            .attr("y", -42.5)
            .attr("fill", "white")
            .attr("transform", "rotate(-90)")
            .style("text-anchor", "middle")
            .text("CM DownStream Bytes Received");
    }

I get a chart on the screen with dates X-Axis and numbers 0 to -6 Y-Axis so D3 is working and trying to display a chart - I just don't see any data/lines.

Note: I'm looking for a line chart.

I think the issue is related to the following code:

       // append the rectangles for the bar chart
        svg.selectAll("path")
            .data(data)
            .enter().append("path")
            .attr("x", function(d) { return d.date; })
            .attr("y", function(d) { return d.value; });

I tried the following as well:

        // append the rectangles for the bar chart
        svg.selectAll("path")
            .data(data)
            .enter().append("path")
            .attr("x", function(d) { return d.date; })
            .attr("y", function(d) { return d.value; });

Any assistance would be greatly appreciated!!

Cheers Adam

Answer 1

SVG path element does not have x and y attributes. You should configure its d attribute(path description). Refer here - developer.mozilla.org/en-US/docs/Web/SVG/Element/path

Code:

var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

 svg.selectAll("path")
      .data(data)
      .enter().append("path")
      .attr("class", "line")
      .attr("d", valueline);