Line chart with D3 - AngularJS

Question

Hi I am developing a line chart with D3 in angular and I came across a code which does what I need. When I do that, I get an error saying 'cannot read property linear of undefined'.

Could you please provide me some insights on this?

Below is my code.

app.directive('linearChart', function($window){
    return{
        restrict:'EA',
        template:"<svg width='400' height='200'></svg>",
        link: function(scope, elem, attrs){
            var salesDataToPlot=scope[attrs.chartData];
            var padding = 20;
            var pathClass="path";
            var xScale, yScale, xAxisGen, yAxisGen, lineFun;

            var d3 = $window.d3;
            var rawSvg=elem.find('svg');
            var svg = d3.select(rawSvg[0]);

            function setChartParameters(){

                xScale = d3.scale.linear()
                    .domain([salesDataToPlot[0].hour, salesDataToPlot[salesDataToPlot.length-1].hour])
                    .range([padding + 5, rawSvg.attr("width") - padding]);

                yScale = d3.scale.linear()
                    .domain([0, d3.max(salesDataToPlot, function (d) {
                        return d.sales;
                    })])
                    .range([rawSvg.attr("height") - padding, 0]);

                xAxisGen = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom")
                    .ticks(salesDataToPlot.length - 1);

                yAxisGen = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .ticks(5);

                lineFun = d3.svg.line()
                    .x(function (d) {
                        return xScale(d.hour);
                    })
                    .y(function (d) {
                        return yScale(d.sales);
                    })
                    .interpolate("basis");
            }

            function drawLineChart() {

                setChartParameters();

                svg.append("svg:g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0,180)")
                    .call(xAxisGen);

                svg.append("svg:g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(20,0)")
                    .call(yAxisGen);

                svg.append("svg:path")
                    .attr({
                        d: lineFun(salesDataToPlot),
                        "stroke": "blue",
                        "stroke-width": 2,
                        "fill": "none",
                        "class": pathClass
                    });
            }

            drawLineChart();
        }
    };
});

I am plugging like this into the html.

<div linear-chart chart-data="salesDataToPlot"></div>

This is my data.

$scope.salesDataToPlot =     [
  {
    "effective_date": "2018-03-12T04:00:00.000Z",
    "avg_health_score": "36.54"
  },
  {
    "effective_date": "2018-03-19T04:00:00.000Z",
    "avg_health_score": "36.57"
  },
  {
    "effective_date": "2018-03-26T04:00:00.000Z",
    "avg_health_score": "36.49"
  },
  {
    "effective_date": "2018-04-02T04:00:00.000Z",
    "avg_health_score": "37.07"
  },
  {
    "effective_date": "2018-04-09T04:00:00.000Z",
    "avg_health_score": "39.18"
  }
]

I need to get a chart like this.

Answer 1

One of the main breaking changes between d3 v3 and d3 v4 is that they changed the names of the scale functions. Depending on your use case and your experience with d3, your best solution might be to use v3 rather than v4 in your project.

Answer 2

Check the version of d3 you use and the version of 3d used from the place you took this code. Make sur they matches. You can also find what changed between these versions and update your code accordingly.