Javascript D3-AngularJS折线图

嗨，我正在开发一个带有角度D3的折线图，我遇到了一个代码，它可以满足我的需要。当我这样做时，我得到一个错误，说“无法读取未定义的线性属性”

你能给我一些关于这方面的见解吗

下面是我的代码

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();
        }
    };
});

我需要一张这样的图表

---

检查您使用的d3版本，以及您使用此代码时使用的3d版本。确保他们匹配。您还可以找到这些版本之间的更改，并相应地更新代码。

d3 v3和d3 v4之间的一个主要突破性更改是它们更改了缩放函数的名称。根据您的用例和使用d3的经验，您的最佳解决方案可能是在项目中使用v3而不是v4。

您可以使用v3，尝试在v4中查找示例，或者尝试编辑它以使其在v4中工作。如果你只是想要一个简单的折线图，d3不是最好的选择。你应该在d3上尝试一个lib。有很多好的lib可以用更简单的方式实现这一点。

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

$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"
  }
]